image-loading-lazy-use-list-of-available-images.html (2900B)
1 <!doctype html> 2 <html> 3 <title>Lazyload images can load immediately from the list of available images</title> 4 <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <!-- A `loading=lazy` image will be placed below this div so that it is below 10 the viewport --> 11 <div style="height: 1000vh;"></div> 12 <div id="below-viewport-img-container"></div> 13 14 <script> 15 const image_path = location.origin + '/html/semantics/embedded-content/the-img-element/resources/image.png?image-loading-lazy-use-list-of-available-images-' + Math.random(); 16 17 promise_test(async t => { 18 const eager_image_promise = new Promise((resolve, reject) => { 19 const img = new Image(); 20 img.onload = resolve; 21 img.onerror = e => { reject(new Error("The img should not fail to load")) }; 22 img.src = image_path; 23 }); 24 25 await eager_image_promise; 26 27 // At this point, the image fetched eagerly above exists in the "list of 28 // available images". As per the spec's #updating-the-image-data algorithm [1] 29 // step 6, the "list of avalable images" is consulted before we take any 30 // lazyload-specific action. This means that lazyload images can load eagerly 31 // if they target a resource in the list of available images, which the image 32 // below is doing. 33 // 34 // Note that if https://github.com/whatwg/html/issues/7005 resolves in favor 35 // of allowing in-flight image requests to be placed in the list of available 36 // images, as opposed to just complete images, this would allow lazyload 37 // images (in addition to non-lazyload ones) to coalesce with these in-flight 38 // entries in the list of available images too. In that case we'd need to test 39 // for this here. 40 // [1]: https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data 41 const lazyload_image_promise = new Promise((resolve, reject) => { 42 const img = new Image(); 43 img.loading = 'lazy'; 44 img.onload = resolve; 45 img.onerror = e => { reject("The img should not fail to load") }; 46 47 document.querySelector('#below-viewport-img-container').append(img); 48 img.src = image_path; 49 }); 50 const timeout_promise = new Promise((resolve, reject) => { 51 t.step_timeout(() => { 52 reject(new Error("The `loading=lazy` image should load immediately from " + 53 "the list of available images, beating this timeout " + 54 "promise.")); 55 }, 1000); 56 }); 57 58 // The `lazyload_image_promise` should resolve first because lazyload images 59 // are able to eagerly use resources in the "list of available images". 60 await Promise.race([lazyload_image_promise, timeout_promise]); 61 }, 'Lazyload images can load immediately from the list of available images'); 62 </script>