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

loading 属性は、ユーザエージェントに画像取得のヒントを提供します。img 要素、および iframe 要素に指定可能で、ブラウザネイティブ実装の遅延読み込み(Lazy loading)を実現します。現時点では Google Chrome の独自実装として、Chrome 75 以降で利用可能ですが、HTML Standerd 仕様内で、img 要素に指定可能な属性として正式に定義されたため、今後の各ブラウザの対応が期待されます。

loading 属性に指定できる値

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

参考リンク

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 の要素を逆引きできます。

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

このページの上部へ