v147 · HTML · loading="lazy"

Scroll Detector

Eight video elements in a gallery. The first two load eagerly; the rest have loading="lazy". Watch the monitor panel on the right — each lazy video is marked only when it crosses the near-viewport threshold where a browser may begin fetching.

Load monitor
total 8
lazy threshold hit 0
bytes saved (est.) 0 KB

invalid value fallback

If a page accidentally writes a non-standard media loading value, the browser preserves the attribute but exposes the property as eager. That means the media should not be counted as lazily deferred.

video invalid fallback not run
audio invalid fallback not run
Click the button to test invalid values.

The one-line change

<!-- Before Chrome 147: needed IntersectionObserver in JS -->
<video id="v1" poster="thumb.jpg">
  <source src="" data-src="video.mp4" type="video/mp4">
</video>

<script>
const io = new IntersectionObserver(entries => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
    const video = entry.target;
    video.querySelector('source').src =
      video.querySelector('source').dataset.src;
    video.load();
    io.unobserve(video);
  }
});
document.querySelectorAll('video[data-lazy]')
  .forEach(v => io.observe(v));
</script>

<!-- Chrome 147+: just this -->
<video loading="lazy" poster="thumb.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗