loading属性を試してみる

画像やiframeの遅延読み込みを実装できるloading属性を試してみます。

対応ブラウザ

loading属性の対応ブラウザはこちら
Chromeやedge、Firefoxなどで対応しているようです。
Firefoxは4月7日にリリースされたバージョン75以降で対応、edgeはChromium版のみで対応となっていますので注意が必要です。

サンプルコード

50枚の画像を読み込んで試してみます。
実装はloading=”lazy”を設定するだけです。

<div><img loading="lazy" src="https://via.placeholder.com/301"></div>
<div><img loading="lazy" src="https://via.placeholder.com/302"></div>
<div><img loading="lazy" src="https://via.placeholder.com/303"></div>

〜 略 〜

<div><img loading="lazy" src="https://via.placeholder.com/349"></div>
<div><img loading="lazy" src="https://via.placeholder.com/350"></div>

画像のサイズ指定は一応無くても動作するようですが、遅延対象の画像の高さが0pxになり後続の画像が詰まってしまうので、今回は画像を囲っているdivに対してheightを設定しています。
画像の遅延読み込みのデモページ
デベロッパーツールのNetworkタブで確認すると、ページ序盤の画像のみ読み込まれていることを確認できました。

chromeの場合

Firefoxの場合

注意点として、ブラウザによってどこまで先を読み込むがの挙動が違うようです。
Firefoxは3枚目の画像(viewportの範囲くらい)、chromeは10枚目の画像(3000px〜4000px先くらい)まで読み込まれていました。

閲覧ブラウザで対応しているかのJavaScriptでの判別は以下の形で実装できます。

if ('loading' in HTMLImageElement.prototype) {
  // loading属性をサポートしてる場合
} else {
  // loading属性をサポートしていない場合
}