【Google Chrome 75】Lazy Load（遅延読み込み）をネイティブ実装へ

Google Chrome 75 「Lazy Load（遅延読み込み）」を実装

Google Chrome 75からついにLazy Load（遅延読み込み）がデフォルトで実装されるそうです。
※もうChrome 75になっていますが。

loading属性というものが追加されるので、そちらをimgタグに設定します。

<img src="example.jpg" alt="サンプル" loading="lazy">

のような記述になります。

imgタグだけではなくiframeにも適用されるので、その場合には、

<iframe src="example.html" loading="lazy" allowfullscreen></iframe>

となります。

loading属性で設定できるのは、3パターン

loading属性に設定できるのは、「lazy」「eager」「auto」の3パターンです。

lazy => 「遅延読み込み」を有効にする
eager => 「遅延読み込み」を無効にする
auto => 「遅延読み込み」するかどうかは、ブラウザが判断する

loading属性を設定していな場合、デフォルトでは「auto」が設定されます。

こちらのサイトで詳しく説明されていたので、そちらを参照して貰った方が、より詳細に分かると思います。
https://addyosmani.com/blog/lazy-loading/
※英語ページですが、私のような中学英語で止まっている人間でも分かるように詳しく書かれています。