素のjavascriptで画像遅延読み込みを実装する方法
画像遅延読み込みするメリット
Google Search Consoleを見てたらある日突然、以下のように改善が必要となってました。
どうやらオフスクリーン画像の遅延読み込みも原因の一つだとか。
いろいろ調べると、いくつかライブラリが出てきますが、今回は素のjavascript で実装する方法を紹介したいと思います。
HTML
2行目 : default.pngという、透明な画像を準備し、 srcに指定しておく。透明なdefault.png なら、サイズを1KBに抑えられる。
3行目 : data属性を設定する。 ここに表示させたい画像のurlを指定する。
<img
src="default.png"
data-src="image.JPG"
/>javascript
1行目 : data属性を持つ画像をすべて取得
3行目 : 取得した画像をfor文で回す。
4行目 : scrollイベント
5行目 : 目標となる画像と画面一番上との距離
6行目 : 画像が画面の下から10%の位置に現れた時の処理
7行目 : srcの値を、data-srcの値に置き換える。
const images = document.querySelectorAll("img[data-src]");
for (let i = 0; i < images.length; i++) {
window.addEventListener("scroll", () => {
const target = images[i].getBoundingClientRect().top;
if (window.innerHeight * 0.9 >= target) {
images[i].setAttribute("src", images[i].getAttribute("data-src"));
}
});
}このように初期設定で透明画像（1KB）が表示され、 画面下端から10%の位置に現れたら、本来の画像を表示させることができました。
参考
まとめ
- default.pngという、透明な画像を準備し、 srcの値に指定しておく。
- data属性を設定し、ここに表示させたい画像のurlを指定
- スクロールイベントで、画像と画面上端からの距離を計算し、 画面に表れたら、srcとdata-srcの値を入れ替える。
