v147 · HTML
Media Loading Timeline
8 video and audio elements at varying scroll positions. Watch their state badges update as they enter the simulated viewport. Compare loading="lazy" vs loading="eager" and see how many MB are saved.
Lazy mode active. Elements load only when they approach the viewport. Use the scroll slider to simulate scrolling down the page.
not loaded
in viewport
loaded
video
audio
0%
attribute fallback contract
The simulation below models loading thresholds; this contract check uses real media elements and verifies the spec fallback for invalid loading values.
Click the button to set
loading="not-a-mode" on fresh media elements.