Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

Lazy-loading media

実験的: これは実験的な技術です。

本番環境で使用する前に、ブラウザーの互換性一覧表を注意深く確認してください。

`HTMLMediaElement` インターフェイスの `loading` プロパティは、現在ウィンドウの視覚的なビューポートの外にあるメディアの読み込みをどのように処理するかについて、ブラウザーにヒントを提供します。これは、初期ページ読み込み中に即座に行うのではなく、必要とされると予想されるまでメディアの読み込みを延期することで、文書のコンテンツの読み込みを最適化するのに役立ちます。これは、`<audio>` 要素の `loading` コンテンツ属性、または `<video>` 要素の `loading` コンテンツ属性を反映します。

メディア

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLMediaElement.loading
実験的
147
147
147
HTML 属性
loading
実験的
147
147
147
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります

基本構文

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

ライブデモ

Lazy media poster

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

プレビュー全画面表示

Media loading checklist

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

プレビュー全画面表示

Delivery guidance

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

プレビュー全画面表示

実務での使いどころ

  • Lazy-loading media の活用

    実験的: これは実験的な技術です。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク