メニューを表示

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

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

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>

このページの上部へ