v148 · 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 video reports loadstart only when it nears the viewport.

Load monitor
total 8
loadstart fired 0
bytes saved (est.) 0 KB

The one-line change

<!-- Before Chrome 148: 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 148+: 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 ↗