loading 属性遅延読み込みを指定

loading 属性は、ユーザエージェントに画像取得のヒントを提供します。img 要素、および iframe 要素に指定可能で、ブラウザネイティブ実装の遅延読み込み(Lazy loading)を実現します。

Chrome 76 以降、Firefox 75 以降、Chromium 版 Edge においては、デフォルトで利用可能です。Safari、iOS Safari に関しては現時点で未対応となっています。

loading 属性に指定できる値

属性値 意味
lazy 可視状態になるまでリソースの取得を遅延させることをユーザエージェントに指示します。
eager 可視状態に関係なく、リソースをすぐに取得する必要があることをユーザエージェントに指示します。

参考リンク

loading 属性の仕様

この属性を使用できる要素

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>

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ