v147 · HTML

loading="lazy" for Video & Audio

The loading="lazy" attribute now works on <video> and <audio> — deferred loading until the element nears the viewport, with zero JavaScript required.

concepts

  1. Scroll Detector

    A tall gallery of video elements. Those above the fold have loading="eager"; those below have loading="lazy". A live panel shows which lazy elements have crossed the near-viewport threshold — watch them activate as you scroll.

  2. Performance Compare

    Side-by-side: the old approach (IntersectionObserver + JavaScript) vs. the new loading="lazy" attribute. Same result, dramatically less code.

  3. Network Savings Estimator

    Configure a page with N video and audio elements, set average file sizes and connection speed, and see how many MB lazy loading saves by not fetching off-screen media. Includes a live IntersectionObserver demo showing deferred loading in action.

  4. Media Loading Timeline

    8 media items at varying page positions with a scroll slider that drives a simulated viewport. Each item's state badge (not loaded → loading → loaded) updates as it enters the viewport. A sidebar timeline shows viewport vs element position, stats bar tracks loaded count and MB saved, and a toggle compares loading="lazy" vs eager behaviour.

  5. Compatibility Lab

    Detects loading="lazy" support on <video> and <audio> via DOM attribute reflection. Runs a live probe and shows all reflected values. Compares native vs IntersectionObserver fallback, and provides the universal polyfill pattern with a 200px root-margin buffer matching Chrome's native threshold.

why it shipped

Lazy loading for <img> shipped in Chrome 76 (2019) and for <iframe> in Chrome 77. Video and audio — the next obvious candidates — required developers to implement their own deferred loading via IntersectionObserver: observe the element, set src only when it enters the viewport, then disconnect the observer. This pattern is well-understood but verbose, and it's easy to get wrong (e.g. not disconnecting the observer, or triggering load too late). The native loading attribute brings the same declarative API that exists for images and iframes, letting the browser optimise the loading threshold automatically based on connection speed and scroll velocity.

references

implementation reference

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