Limited support Use with care and provide a fallback when broad support matters.

Lazy-loading media

Experimental: This is an experimental technology

Check the Browser compatibility table carefully before using this in production.

The loading property of the HTMLMediaElement interface provides a hint to the browser on how to handle the loading of the media which is currently outside the window's visual viewport. This helps to optimize the loading of the document's contents by postponing loading the media until it's expected to be needed, rather than immediately during the initial page load. It reflects the <audio> element's loading content attribute or the <video> element's loading content attribute.

Media

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLMediaElement.loading
Experimental
147
147
147
HTML attribute
loading
Experimental
147
147
147
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled

Syntax

HTML 
<img src="photo.jpg" loading="lazy" alt="遅延読み込み画像"
  width="800" height="600">
<iframe src="https://example.com" loading="lazy"
  width="600" height="400"></iframe>

Live demo

Lazy media poster

Use loading="lazy" on a media element when the browser supports deferred media loading.

PreviewFullscreen

Media loading checklist

Compare lazy loading with poster images, dimensions, and preload hints.

PreviewFullscreen

Delivery guidance

Document when lazy media is useful and when eager loading is still the right choice.

PreviewFullscreen

Use cases

  • Enhance media playback

    Use Lazy-loading media when audio, video, or responsive media needs better control or more capable browser behavior.

  • Deliver flexible assets

    Apply Lazy-loading media to adapt media loading or presentation more closely to user context and device capability.

Cautions

  • Test Lazy-loading media in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Pair richer media behavior with captions, transcripts, controls, and loading behavior that remain understandable to all users.

Related links