loading 属性遅延読み込みを指定
loading 属性は、ユーザエージェントに画像取得のヒントを提供します。img 要素、および iframe 要素に指定可能で、ブラウザネイティブ実装の遅延読み込み（Lazy loading）を実現します。
Chrome 76 以降、Firefox 75 以降、Chromium 版 Edge においては、デフォルトで利用可能です。macOS 向け Safari については macOS Monterey 12.3 にバンドルされた 15.4 で正式にサポートされました。iOS においても 15.4 以降の Safari、Chrome であれば利用可能です。
loading 属性に指定できる値
| 属性値 | 意味 |
|---|---|
| lazy | 可視状態になるまでリソースの取得を遅延させることをユーザエージェントに指示します。 |
| eager | 可視状態に関係なく、リソースをすぐに取得する必要があることをユーザエージェントに指示します。 |
参考リンク
loading 属性のサンプルソース
<!-- 例えば画像に指定する場合 --> <img loading="lazy" src="sample.jpg" alt="サンプル" /> <!-- 例えば YouTube の動画埋め込みに指定する場合 --> <iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/example"></iframe> <!-- 例えば picture 要素に指定する場合は picture 要素ではなく、内包する img 要素に指定します --> <picture> <source srcset="..." /> <source srcset="..." /> <img loading="lazy" src="sample.jpg" alt="サンプル" /> </picture>