What is the issue with the HTML Standard?
Consider this test-case (live):
<!doctype html>
<img style="display: none" onload="this.style.display = ''" loading="lazy">
<script>
const SRC = "https://wpt.live/images/green.png?" + Math.random();
document.querySelector("img").src = SRC;
setTimeout(() => {
new Image().src = SRC;
}, 3000);
</script>
WebKit and Blink somehow switch the lazy load to eager after the image loads (showing the green rectangle).
We found one website depending on this behavior in Mozilla bug 1922416.
AFAICT this just goes against the spec (and it's super bizarre)... Two questions:
- Would other implementations be open to change to match the spec? I think it's a rather obscure case, and behavior is bizarre enough, that it might be worth doing/trying.
- If not, we should probably get this spec'd, but I'm curious about how does this actually work? Is it
src specific or does it also apply to picture / srcset?
cc @zcorpan @annevk @mfreed7
What is the issue with the HTML Standard?
Consider this test-case (live):
WebKit and Blink somehow switch the lazy load to eager after the image loads (showing the green rectangle).
We found one website depending on this behavior in Mozilla bug 1922416.
AFAICT this just goes against the spec (and it's super bizarre)... Two questions:
srcspecific or does it also apply topicture/srcset?cc @zcorpan @annevk @mfreed7