below-viewport-image-loading-lazy-load-event.html (3054B)
1 <!DOCTYPE html> 2 <head> 3 <title>Below-viewport loading=lazy images do not block the window load event 4 when scrolled into viewport</title> 5 <link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"> 6 <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="../resources/common.js"></script> 10 </head> 11 12 <body> 13 <!-- When this image loads, we will scroll the below-viewport loading=lazy 14 images into the viewport. This happens before the window load event is 15 fired --> 16 <img id="scroll_trigger" 17 src="resources/image.png?scroll-trigger&pipe=trickle(d1)" 18 onload="scroll_trigger_img.resolve();" onerror="scroll_trigger_img.reject();"> 19 <!-- This image blocks the window load event for 2 seconds --> 20 <img src="resources/image.png?window-load-blocking&pipe=trickle(d2)"> 21 22 <div style="height:1000vh"></div> 23 <!-- These images must load because they intersect the viewport, but they must 24 not block the window load event, because they are loading=lazy --> 25 <img id="visible" 26 src="resources/image.png?visible&pipe=trickle(d3)" loading="lazy" 27 onload="visible_img.resolve();" onerror="visible_img.reject();"> 28 <img id="visibility_hidden" style="visibility:hidden;" 29 src="resources/image.png?visibility_hidden&pipe=trickle(d3)" loading="lazy" 30 onload="visibility_hidden_img.resolve();" onerror="visibility_hidden_img.reject();"> 31 </body> 32 33 <script> 34 const scroll_trigger_img = new ElementLoadPromise("visible"); 35 const visible_img = new ElementLoadPromise("visible"); 36 const visibility_hidden_img = new ElementLoadPromise("visibility_hidden"); 37 38 async_test(t => { 39 let has_window_loaded = false; 40 41 scroll_trigger_img.promise 42 .then(t.step_func(() => { 43 assert_false(has_window_loaded, 44 "The scroll_trigger image should load before the window " + 45 "load event fires"); 46 visibility_hidden_img.element().scrollIntoView(); 47 })) 48 .catch(t.unreached_func("The scroll_trigger image should load")); 49 50 window.addEventListener("load", t.step_func(() => { 51 has_window_loaded = true; 52 })); 53 54 Promise.all([visible_img.promise, visibility_hidden_img.promise]) 55 .then(t.step_func_done(() => { 56 assert_true(has_window_loaded, 57 "The window load event should fire before the " + 58 "below-viewport loading=lazy images load"); 59 assert_true(visible_img.element().complete, 60 "The below-viewport loading=lazy visible image is complete"); 61 assert_true(visibility_hidden_img.element().complete, 62 "The below-viewport loading=lazy visibility:hidden image is complete"); 63 })) 64 .catch(t.unreached_func("The images should load successfully")); 65 66 }, "Below-viewport loading=lazy images do not block the window load event when " + 67 "scrolled into viewport"); 68 </script>