Lazy-loading images and iframes
loading は HTMLIFrameElement インターフェイスのプロパティで、ユーザーエージェントに iframe をページ読み込み時に即座に読み込むか、必要な時にのみ読み込むかを指定するヒントを提供する文字列です。
これは、文書内のコンテンツの読み込みを最適化するために使用することができます。ページが読み込まれたときに表示されている iframe は、すぐに（熱心に）ダウンロードすることができます。一方、最初のページ読み込み時に画面外にある可能性が高い iframe は、遅延してダウンロードすることができます。つまり、ウィンドウの視覚的ビューポートに表示される直前にダウンロードすることができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 77 | 79 | 121 | 16.4 | 77 | 16.4 | |
| HTML 属性 | ||||||
loading | 77 | 79 | 121 | 16.4 | 77 | 16.4 |
loading | 77 | 79 | 75 | 15.4 | 77 | 15.4 |
| DOM API | ||||||
| HTMLImageElement の loading プロパティは、現在のウィンドウのvisual viewportの外にある画像の読み込みをどのように処理するかのヒントをブラウザーに提供するものです。これは、最初のページ読み込み時にすぐに画像を読み込むのではなく、必要と予想されるまで画像の読み込みを延期することで、文書のコンテンツの読み込みを最適化するのに役立ちます。これは 要素の loading コンテンツ属性に対応しています。 | 77 | 79 | 75 | 15.4 | 77 | 15.4 |
基本構文
HTML
<!--Apply to images outside the first view --> <img src="photo.jpg" alt="photo" loading="lazy" width="800" height="600"> <iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>ライブデモ
Lazy image gallery
Set loading="lazy" on below-the-fold images while keeping the markup simple.
プレビュー全画面表示
実務での使いどころ
-
Lazy-loading images and iframes の活用
loading は HTMLIFrameElement インターフェイスのプロパティで、ユーザーエージェントに iframe をページ読み込み時に即座に読み込むか、必要な時にのみ読み込むかを指定するヒントを提供する文字列です。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。