Don't lazy-load already-loaded image in client-side transition (vercel#26968)

fixes vercel#19074 
This change disables image lazy-loading when both of the following are true:
1) A image is being rendered following a client-side page transition
2) The image has been previously loaded during this session.

Before this change, all images with lazy-loading enabled have a visible flicker during client-side page transitions, even though they're already loaded.

With this change, there's are two performance risks:

1) There's a chance that some offscreen images will have lazy-loading disabled unnecessarily because they were previously loaded. I think the performance hit here is pretty negligible and the situation is unlikely to come up very often.

2) There's a chance a different-sized version of the image will be selected by the browser, but lazy-loading will be disabled anyway. This seems even more unlikely to me, and anyway the performance hit from a stray un-lazy-loaded image (on a client-side transition) is very minor.

In both cases, I think the performance risk is outweighed by the UX improvement of getting rid of the image flicker on page transition.

Author: atcastle

packages/next/client/image.tsx

@@ -9,6 +9,8 @@ import {
 } from '../server/image-config'
 import { useIntersection } from './use-intersection'
 
+const loadedImageURLs = new Set<string>()
+
 if (typeof window === 'undefined') {
   ;(global as any).__NEXT_IMAGE_IMPORTED = true
 }
@@ -264,6 +266,7 @@ function defaultImageLoader(loaderProps: ImageLoaderProps) {
 // handler instead of the img's onLoad attribute.
 function handleLoading(
   img: HTMLImageElement | null,
+  src: string,
   placeholder: PlaceholderValue,
   onLoadingComplete?: () => void
 ) {
@@ -279,6 +282,7 @@ function handleLoading(
           img.style.backgroundSize = 'none'
           img.style.backgroundImage = 'none'
         }
+        loadedImageURLs.add(src)
         if (onLoadingComplete) {
           onLoadingComplete()
         }
@@ -423,6 +427,9 @@ export default function Image({
     unoptimized = true
     isLazy = false
   }
+  if (src && typeof window !== 'undefined' && loadedImageURLs.has(src)) {
+    isLazy = false
+  }
 
   const [setRef, isIntersected] = useIntersection<HTMLImageElement>({
     rootMargin: '200px',
@@ -558,6 +565,8 @@ export default function Image({
     })
   }
 
+  let srcString: string = src
+
   return (
     <div style={wrapperStyle}>
       {sizerStyle ? (
@@ -605,7 +614,7 @@ export default function Image({
         className={className}
         ref={(img) => {
           setRef(img)
-          handleLoading(img, placeholder, onLoadingComplete)
+          handleLoading(img, srcString, placeholder, onLoadingComplete)
         }}
         style={imgStyle}
       />

test/integration/image-component/basic/pages/lazy.js

@@ -8,15 +8,15 @@ const Lazy = () => {
       <p id="stubtext">This is a page with lazy-loaded images</p>
       <Image
         id="lazy-top"
-        src="foo1.jpg"
+        src="lazy1.jpg"
         height={400}
         width={1024}
         loading="lazy"
       ></Image>
       <div style={{ height: '2000px' }}></div>
       <Image
         id="lazy-mid"
-        src="foo2.jpg"
+        src="lazy2.jpg"
         loading="lazy"
         height={400}
         width={300}
@@ -25,7 +25,7 @@ const Lazy = () => {
       <div style={{ height: '2000px' }}></div>
       <Image
         id="lazy-bottom"
-        src="https://www.otherhost.com/foo3.jpg"
+        src="https://www.otherhost.com/lazy3.jpg"
         height={400}
         width={300}
         unoptimized
@@ -34,14 +34,14 @@ const Lazy = () => {
       <div style={{ height: '2000px' }}></div>
       <Image
         id="lazy-without-attribute"
-        src="foo4.jpg"
+        src="lazy4.jpg"
         height={400}
         width={800}
       ></Image>
       <div style={{ height: '2000px' }}></div>
       <Image
         id="eager-loading"
-        src="foo5.jpg"
+        src="lazy5.jpg"
         loading="eager"
         height={400}
         width={1900}

test/integration/image-component/basic/test/index.test.js

@@ -109,10 +109,10 @@ function runTests() {
 function lazyLoadingTests() {
   it('should have loaded the first image immediately', async () => {
     expect(await browser.elementById('lazy-top').getAttribute('src')).toBe(
-      'https://example.com/myaccount/foo1.jpg?auto=format&fit=max&w=2000'
+      'https://example.com/myaccount/lazy1.jpg?auto=format&fit=max&w=2000'
     )
     expect(await browser.elementById('lazy-top').getAttribute('srcset')).toBe(
-      'https://example.com/myaccount/foo1.jpg?auto=format&fit=max&w=1024 1x, https://example.com/myaccount/foo1.jpg?auto=format&fit=max&w=2000 2x'
+      'https://example.com/myaccount/lazy1.jpg?auto=format&fit=max&w=1024 1x, https://example.com/myaccount/lazy1.jpg?auto=format&fit=max&w=2000 2x'
     )
   })
   it('should not have loaded the second image immediately', async () => {
@@ -140,11 +140,11 @@ function lazyLoadingTests() {
 
     await check(() => {
       return browser.elementById('lazy-mid').getAttribute('src')
-    }, 'https://example.com/myaccount/foo2.jpg?auto=format&fit=max&w=1024')
+    }, 'https://example.com/myaccount/lazy2.jpg?auto=format&fit=max&w=1024')
 
     await check(() => {
       return browser.elementById('lazy-mid').getAttribute('srcset')
-    }, 'https://example.com/myaccount/foo2.jpg?auto=format&fit=max&w=480 1x, https://example.com/myaccount/foo2.jpg?auto=format&fit=max&w=1024 2x')
+    }, 'https://example.com/myaccount/lazy2.jpg?auto=format&fit=max&w=480 1x, https://example.com/myaccount/lazy2.jpg?auto=format&fit=max&w=1024 2x')
   })
   it('should not have loaded the third image after scrolling down', async () => {
     expect(await browser.elementById('lazy-bottom').getAttribute('src')).toBe(
@@ -165,7 +165,7 @@ function lazyLoadingTests() {
     )
     await waitFor(200)
     expect(await browser.elementById('lazy-bottom').getAttribute('src')).toBe(
-      'https://www.otherhost.com/foo3.jpg'
+      'https://www.otherhost.com/lazy3.jpg'
     )
     expect(
       await browser.elementById('lazy-bottom').getAttribute('srcset')
@@ -189,17 +189,17 @@ function lazyLoadingTests() {
     await waitFor(200)
     expect(
       await browser.elementById('lazy-without-attribute').getAttribute('src')
-    ).toBe('https://example.com/myaccount/foo4.jpg?auto=format&fit=max&w=1600')
+    ).toBe('https://example.com/myaccount/lazy4.jpg?auto=format&fit=max&w=1600')
     expect(
       await browser.elementById('lazy-without-attribute').getAttribute('srcset')
     ).toBe(
-      'https://example.com/myaccount/foo4.jpg?auto=format&fit=max&w=1024 1x, https://example.com/myaccount/foo4.jpg?auto=format&fit=max&w=1600 2x'
+      'https://example.com/myaccount/lazy4.jpg?auto=format&fit=max&w=1024 1x, https://example.com/myaccount/lazy4.jpg?auto=format&fit=max&w=1600 2x'
     )
   })
 
   it('should load the fifth image eagerly, without scrolling', async () => {
     expect(await browser.elementById('eager-loading').getAttribute('src')).toBe(
-      'https://example.com/myaccount/foo5.jpg?auto=format&fit=max&w=2000'
+      'https://example.com/myaccount/lazy5.jpg?auto=format&fit=max&w=2000'
     )
     expect(
       await browser.elementById('eager-loading').getAttribute('srcset')