picture-loading-lazy.html (2537B)
1 <!DOCTYPE html> 2 <head> 3 <title>Images with loading='lazy' in picture elements load when near the viewport</title> 4 <link rel="author" title="Raj T" href="mailto:rajendrant@chromium.org"> 5 <link rel="help" href="https://github.com/scott-little/lazyload"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../resources/common.js"></script> 9 </head> 10 11 <script> 12 const in_viewport_img = new ElementLoadPromise("in_viewport_img"); 13 const lazy_attribute_img = new ElementLoadPromise("lazy_attribute_img"); 14 const eager_attribute_img = new ElementLoadPromise("eager_attribute_img"); 15 16 const document_load_promise = new Promise(resolve => { 17 window.addEventListener("load", resolve); 18 }); 19 20 async_test(function(t) { 21 document_load_promise.then(t.step_func_done(function() { 22 assert_false(lazy_attribute_img.element().complete); 23 lazy_attribute_img.element().scrollIntoView(); 24 })); 25 }, "Test that the loading=lazy <picture> element below viewport was deferred, on document load."); 26 27 async_test(function(t) { 28 in_viewport_img.promise.then(t.step_func_done()); 29 }, "Test that in viewport <picture> element was loaded"); 30 31 async_test(function(t) { 32 eager_attribute_img.promise.then(t.step_func_done()); 33 }, "Test that eager <picture> element was loaded"); 34 35 async_test(function(t) { 36 lazy_attribute_img.promise.then(t.step_func_done()); 37 }, "Test that deferred <picture> element was loaded-in as well, after scrolled down"); 38 39 </script> 40 41 <body> 42 <picture> 43 <source sizes='50vw' srcset='resources/image.png?in_viewport_img'> 44 <img id='in_viewport_img' src='img-not-loaded.png' loading="lazy" onload="in_viewport_img.resolve();"> 45 </picture> 46 <div style="height:10000px;"></div> 47 <picture> 48 <source sizes='50vw' srcset='resources/image.png?lazy_attribute_img'> 49 <img id='lazy_attribute_img' src='img-not-loaded.png' loading="lazy" onload="lazy_attribute_img.resolve();"> 50 </picture> 51 <picture> 52 <source sizes='50vw' srcset='resources/image.png?eager_attribute_img'> 53 <img id='eager_attribute_img' src='img-not-loaded.png' loading="eager" onload="eager_attribute_img.resolve();"> 54 </picture> 55 56 <!-- 57 This async script loads very slowly in order to ensure that, if the 58 below_viewport image has started loading, it has a chance to finish 59 loading before window.load() happens, so that the test will dependably fail 60 in that case instead of potentially passing depending on how long different 61 resource fetches take. 62 --> 63 <script async src="/common/slow.py"></script> 64 </body>