サイト表示が速くなる画像遅延読み込み「lazy-load」

JavaScriptを使用せずに画像を遅延読み込みできる「Lazy-Load」を紹介します。

以下のようにimgタグに「loading」属性を指定するだけで簡単に実装できます。

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

上記の指定によりページ表示の際は画像を読み込まず、スクロールで画像が表示領域に近づいたときに読み込まれるようになります。

対応しているブラウザは2021年現在で「Chrome」「Firefox」「Edge」です。早く「Safari」が対応してくれるといいですね。

この記事で使用しているアイキャッチ画像は以下より作成できます。