image-loading-lazy-multiple-times.html (2341B)
1 <head> 2 <title>Images with loading='lazy' can be lazy loaded multiple times</title> 3 <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org"> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 </head> 8 9 <body> 10 <!-- This is used to represent the top of the viewport, so we can scroll the 11 below-viewport image out-of-view later in the test --> 12 <div id="top_div"></div> 13 <div style="height:1000vh;"></div> 14 <img id="below_viewport" loading="lazy" src="resources/image.png?image-loading-lazy-multiple-times-first"> 15 16 <script> 17 const t = async_test("Images with loading='lazy' can be lazy loaded multiple times"); 18 const image = document.querySelector('#below_viewport'); 19 const top_div = document.querySelector('#top_div'); 20 21 let has_window_load_fired = false; 22 23 // This should be triggered first. 24 window.addEventListener('load', t.step_func(() => { 25 has_window_load_fired = true; 26 // Scroll the loading=lazy below-viewport image into view, so that it loads. 27 image.scrollIntoView(); 28 })); 29 30 image.onload = t.step_func(() => { 31 assert_true(has_window_load_fired, 32 "The loading=lazy below-viewport image should not block the " + 33 "window load event"); 34 changeImageSourceAndScrollToTop(); 35 }); 36 37 function changeImageSourceAndScrollToTop() { 38 top_div.scrollIntoView(); 39 40 // Allow some time for scroll back to top, since we don't 41 // want the image to still be in the viewport and trigger a 42 // load due to the scroll being slow. 43 t.step_timeout(() => { 44 // Lazily load a "different" image. 45 image.src = 'resources/image.png?image-loading-lazy-multiple-times-second'; 46 image.onload = 47 t.unreached_func("The loading=lazy below-viewport image should lazily " + 48 "load its second image, and not load it eagerly when " + 49 "the `src` attribute is changed"); 50 51 // In 1s, scroll the image *back* into view, and record that it loads 52 // successfully. 53 t.step_timeout(() => { 54 image.onload = t.step_func_done(); 55 image.scrollIntoView(); 56 }, 1000); 57 }, 500); 58 } 59 </script> 60 </body>