Chapter 28無料公開

- 画像のlazy loading(頻出度:★★★)

hideki_climax
hideki_climax
2022.09.04に更新
このチャプターの目次

概要

いわゆる画像の遅延読み込みです。近くまでスクロールされて初めて画像を読み込むことにより、全体の表示速度を改善するための手法です。

昔はJavaScriptのライブラリなどでなんとか実現していましたが、今はHTML側が進歩し非常に簡単に実現できるようになりました。

コード

<img src="image/to/path" loading="lazy" />

解説

このようにimgタグのloading属性にlazyを指定するだけです。

ただしこの方法はSafariにおいて効果がありません。Safariで遅延読み込みをさせるには今のところJavaScriptのライブラリを使うしかないようです。