Skip to content

[images] Lazy loading and out of band loads. #10671

@emilio

Description

@emilio

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions