▲TOPへ戻る

素のjavascriptで画像遅延読み込みを実装する方法

lazyLoad

画像遅延読み込みするメリット

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%の位置に現れたら、本来の画像を表示させることができました。

lazy Load

参考

js
要素の高さを取得する方法。getBoundingClientRectについて

まとめ

  1. default.pngという、透明な画像を準備し、 srcの値に指定しておく。
  2. data属性を設定し、ここに表示させたい画像のurlを指定
  3. スクロールイベントで、画像と画面上端からの距離を計算し、 画面に表れたら、srcdata-srcの値を入れ替える。

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ