Lazy-loading media
実験的: これは実験的な技術です。
本番環境で使用する前に、ブラウザーの互換性一覧表を注意深く確認してください。
`HTMLMediaElement` インターフェイスの `loading` プロパティは、現在ウィンドウの視覚的なビューポートの外にあるメディアの読み込みをどのように処理するかについて、ブラウザーにヒントを提供します。これは、初期ページ読み込み中に即座に行うのではなく、必要とされると予想されるまでメディアの読み込みを延期することで、文書のコンテンツの読み込みを最適化するのに役立ちます。これは、`<audio>` 要素の `loading` コンテンツ属性、または `<video>` 要素の `loading` コンテンツ属性を反映します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 147 | 147 | | | 147 | | |
| HTML 属性 | ||||||
loading 実験的 | 147 | 147 | | | 147 | |
注釈 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 の活用
実験的: これは実験的な技術です。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。