image-loading-lazy-srcset.html (1338B)
1 <!DOCTYPE html> 2 <head> 3 <title>loading='lazy' image with srcset</title> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#update-the-image-data"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#will-lazy-load-image-steps"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <div style="height:1000vh;"></div> 10 <img srcset="resources/image.png?loading-lazy-srcset" loading="lazy"> 11 <img loading="lazy" srcset="resources/image.png?loading-lazy-srcset"> 12 <script> 13 promise_test(async t => { 14 let loaded_images = 0; 15 const imgs = document.querySelectorAll("img"); 16 imgs.forEach(img => { 17 img.addEventListener("load", () => { loaded_images++; }, { once: true }); 18 }); 19 20 await new Promise(resolve => window.addEventListener("load", resolve)); 21 22 assert_equals(loaded_images, 0, 23 "lazy-load images with srcset shouldn't be loaded yet"); 24 25 const promises = [ 26 new Promise(resolve => imgs[0].addEventListener("load", resolve)), 27 new Promise(resolve => imgs[1].addEventListener("load", resolve)), 28 ]; 29 30 imgs[1].scrollIntoView(); 31 await Promise.all(promises); 32 33 imgs.forEach(img => { 34 assert_true(img.complete, 35 "Now the lazy-load image with srcset should be loaded"); 36 }); 37 }); 38 </script>