Fix next/image usage in most cases of onLoad()

[styfle]

Even though we never documented it, the onLoad prop used to work (in most cases) in Next.js 12.1.4 and broke in 12.1.5 once the code was refactored in PR #35889.

We still shouldn't document it because onLoad doesn't work in all cases so onLoadingComplete is preferred, however tests were added for the cases that do work.

Use cases that don't work with onLoad are Data URLs as well as loading="eager".

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
buildDuration	16.6s	16.3s	-223ms
buildDurationCached	6.3s	6.3s	-15ms
nodeModulesSize	485 MB	485 MB	⚠️ +189 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.331	3.301	-0.03
/ avg req/sec	750.61	757.41	+6.8
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.387	1.414	⚠️ +0.03
/error-in-render avg req/sec	1802.3	1768.61	⚠️ -33.69

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.3 kB	28.3 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72 kB	72 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	3.04 kB	3.04 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.73 kB	5.74 kB	⚠️ +12 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.36 kB	2.36 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	⚠️ +12 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
_buildManifest.js gzip	461 B	461 B	✓
Overall change	461 B	461 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
index.html gzip	531 B	531 B	✓
link.html gzip	543 B	543 B	✓
withRouter.html gzip	524 B	524 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-5597cb692d5dcc6b.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-9a0a6e890d6a266a.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-c605640c895e01ab.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-98eb70bf22fb21da.js"

Diff for image-HASH.js

@@ -893,6 +893,7 @@
           onLoadingCompleteRef = _param.onLoadingCompleteRef,
           setBlurComplete = _param.setBlurComplete,
           setIntersection = _param.setIntersection,
+          onLoad = _param.onLoad,
           onError = _param.onError,
           isVisible = _param.isVisible,
           rest = _objectWithoutProperties(_param, [
@@ -914,6 +915,7 @@
             "onLoadingCompleteRef",
             "setBlurComplete",
             "setIntersection",
+            "onLoad",
             "onError",
             "isVisible"
           ]);
@@ -972,6 +974,9 @@
                     onLoadingCompleteRef,
                     setBlurComplete
                   );
+                  if (onLoad) {
+                    onLoad(event);
+                  }
                 },
                 onError: function(event) {
                   if (placeholder === "blur") {

---

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
buildDuration	19.1s	19.1s	-8ms
buildDurationCached	6.5s	6.2s	-296ms
nodeModulesSize	485 MB	485 MB	⚠️ +189 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.33	3.336	⚠️ +0.01
/ avg req/sec	750.8	749.39	⚠️ -1.41
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.413	1.435	⚠️ +0.02
/error-in-render avg req/sec	1769.45	1742.25	⚠️ -27.2

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.7 kB	28.7 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.6 kB	72.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	325 B	325 B	✓
dynamic-HASH.js gzip	3.02 kB	3.02 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.77 kB	5.78 kB	⚠️ +13 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.44 kB	2.44 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.1 kB	16.1 kB	⚠️ +13 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
_buildManifest.js gzip	458 B	457 B	-1 B
Overall change	458 B	457 B	-1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-onload-next-image-native	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-5597cb692d5dcc6b.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-9a0a6e890d6a266a.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-c605640c895e01ab.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-98eb70bf22fb21da.js"

Diff for image-HASH.js

@@ -893,6 +893,7 @@
           onLoadingCompleteRef = _param.onLoadingCompleteRef,
           setBlurComplete = _param.setBlurComplete,
           setIntersection = _param.setIntersection,
+          onLoad = _param.onLoad,
           onError = _param.onError,
           isVisible = _param.isVisible,
           rest = _objectWithoutProperties(_param, [
@@ -914,6 +915,7 @@
             "onLoadingCompleteRef",
             "setBlurComplete",
             "setIntersection",
+            "onLoad",
             "onError",
             "isVisible"
           ]);
@@ -972,6 +974,9 @@
                     onLoadingCompleteRef,
                     setBlurComplete
                   );
+                  if (onLoad) {
+                    onLoad(event);
+                  }
                 },
                 onError: function(event) {
                   if (placeholder === "blur") {

Commit: d3a6e0b