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	可視状態に関係なく、リソースをすぐに取得する必要があることをユーザエージェントに指示します。

参考リンク

• Chrome 75 に HTML 側の指定のみで動作する画像遅延読み込み （loading="lazy"） が実装される

<!-- 例えば画像に指定する場合 -->
<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>