v148 · HTML · Performance

Lazy Gallery

A media gallery with 12 video and audio elements, all marked loading="lazy". Scroll down to see each item load as it enters the viewport. A live counter shows how many have loaded vs. are still deferred, saving bandwidth for items the user never reaches.

Total: 0
Loaded: 0
Deferred: 0
Saved bandwidth: 0 MB
Click "Generate gallery" to create lazy-loaded media items, then scroll to watch them load.

The markup

<!-- Chrome 148: loading="lazy" on <video> -->
<video loading="lazy" controls src="/media/demo.mp4"></video>

<!-- Chrome 148: loading="lazy" on <audio> -->
<audio loading="lazy" controls src="/media/demo.mp3"></audio>

<!-- Eager (always loads immediately) -->
<video loading="eager" controls src="/media/hero.mp4"></video>

<!-- Default is "eager" if omitted —
     lazy only activates when attribute is present -->

references

implementation reference

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