画像を遅延読み込みする

JavaScriptで画像を後から読み込む

JavaScriptを使って画像ファイルを指定したタイミングで読み込むようにして、遅延読み込みを実装します。

以下の例はHTMLにある3つのimg要素に対して画像の遅延読み込みを行い、それぞれの画像が読み込みを完了した時点でコンソールにメッセージを出力します。
このコードのサンプルページはこちら

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<img data-src="./image/bear.png" alt="Bear" width="200">
	<img data-src="./image/fox_front.png" alt="Fox" width="200">
	<img data-src="./image/rhinos.png" alt="Rhinos" width="200">
</article>

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  let img_elements = document.querySelectorAll("img");

  for(let i=0; i<img_elements.length; i++) {

    // 画像読み込み完了したときの処理
    img_elements[i].addEventListener('load', (e)=> {
      console.log(e.target.alt + " load");
    });

    // 遅延読み込み
    img_elements[i].src = img_elements[i].getAttribute("data-src");
  }
});

赤字になっている箇所では、ページの読み込みが完了したときのイベント「load」をイベントリスナーに登録しています。

ページのHTML解析時には画像を読み込まないようにするために、HTMLのimg要素では画像のパスをsrc属性ではなくdata-src属性に指定しています。
今回はページ読み込みが完了したタイミングに発生するイベント「DOMContentLoaded」を検出したら、JavaScriptでdata-src属性のパスをsrc属性にセットして画像ファイルの遅延読み込みを行います。

今回のコードでは1つの画像を読み込むごとにイベント「load」を検出して、alt属性と一緒にメッセージをコンソールに出力します。
HTMLにはimg要素が3つあるので、loadも合計3回発生します。

コンソールの出力例

Fox load
Rhinos load
Bear load

画像の読み込みが完了するタイミングは通信状況やキャッシュ、ファイルサイズなどでその都度変わるため、画像の読み込み完了するタイミングはHTMLに記述されたimg要素の順番とは異なります。

ディスプレイの解像度に応じて画像を切り替えるときの対応

Retinaディスプレイなどのピクセル比率が高い高解像度ディスプレイと通常ディスプレイではサイズが異なる画像ファイルを用意することがあります。
そのときは、window.devicePixelRatioプロパティを使ってディスプレイのピクセル比率を調べて読み込む画像を切り替えるように設定します。

以下のコードは高解像度ディスプレイのときは「ファイル名x2.png」、通常ディスプレイは「ファイル名.png」を読み込むように修正しています。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  let img_elements = document.querySelectorAll("img");

  for(let i=0; i<img_elements.length; i++) {

    // 画像読み込み完了したときの処理
    img_elements[i].addEventListener('load', (e)=> {
      console.log(e.target.alt + " load");
    });

    // 遅延読み込み
    if( window.devicePixelRatio === 2 ) {
      img_elements[i].src = img_elements[i].getAttribute("data-src").replace( /(\.png|\.jpg)$/g, 'x2$1');
      } else {
      img_elements[i].src = img_elements[i].getAttribute("data-src");
    }
  }
});

高解像度ディスプレイの場合はwindow.devicePixelRatioプロパティの値が2になります。
読み込む画像も「ファイル名x2.png」になるため、data-src属性のパスに対してreplaceメソッドと正規表現で「x2」を加えます。

今回のHTMLではPNG形式のみを使っていますが、正規表現の指定で「\.png|\.jpg」とすることで「.png」または「.jpg」のときにファイル名を置き換えるため、JPEG形式にも対応しています。

else文で実行するコードはdata-src属性のパスをそのままsrc属性に入れて、通常ディスプレイの画像ファイルの読み込みを行います。