lazy-out-of-band-load.html (1397B)
1 <!doctype html> 2 <title>Lazy loaded image doesn't get loaded eagerly after another image gets loaded with the same source</title> 3 <link rel="help" href="https://github.com/whatwg/html/issues/10671"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <body> 7 <script> 8 async function run_test(prop, image, t) { 9 let value = `${image}?lazy-out-of-band-load-` + Math.random(); 10 let img = document.createElement("img") 11 img[prop] = value; 12 img.loading = "lazy"; 13 img.style.display = "none"; 14 img.addEventListener("error", t.unreached_func("error: should never try to load")); 15 img.addEventListener("load", t.unreached_func("load: should never try to load")); 16 document.body.appendChild(img); 17 18 await new Promise(r => t.step_timeout(r, 100)); 19 20 // now load another image with the same src, but not lazy. 21 img = document.createElement("img"); 22 img[prop] = value; 23 24 await new Promise(r => { 25 img.addEventListener("load", r, { once: true }); 26 img.addEventListener("error", r, { once: true }); 27 document.body.appendChild(img); 28 }); 29 30 // Wait a bit to make sure we don't get a broken load. 31 await new Promise(r => t.step_timeout(r, 100)); 32 } 33 34 for (let prop of ["src", "srcset"]) { 35 for (let path of ["/images/green.png", "/images/not-found"]) { 36 promise_test(t => run_test(prop, path, t), `${prop} = ${path}`); 37 } 38 } 39 </script>