JavaScript

レシピ

イベント

画像の読み込みが完了したら処理を実行する

JavaScriptで画像読み込みを行い完了したときに指定した処理を実行する方法について解説します。

この記事のポイント

  • 画像の読み込みが完了するとイベント「load」が発生する

画像を読み込んだら発生するイベント

ページでimg要素src属性に指定した画像を読み込み完了すると、イベント「load」が発生します。
img要素に対してこのイベントをイベントリスナーで登録しておくことで、読み込みが完了したタイミングで指定した処理を実行することができます。

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

HTML コード例

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

JavaScript コード例

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

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

  for(var 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のimg要素では画像のパスをsrc属性ではなくdata-src属性に指定します。
そして後からJavaScriptでdata-src属性のパスを取得してsrc属性にセットすることで、画像の遅延読み込みを行います。

1つの画像を読み込むごとにloadが発生してalt属性と一緒にメッセージをコンソールに出力します。
今回のHTMLではimg要素が3つあるので、loadも3回発生して以下のようにコンソールに出力します。

CSSではclass属性btn」のボタンに対してanimationプロパティを使って、アニメーションの再生に関する設定を指定しています。
以下の指定を1つのプロパティでまとめて指定することができます。

コンソールの出力例

Fox load
Rhinos load
Bear load

画像の読み込みが完了するタイミングはキャッシュやファイルサイズによって変わるため、HTMLに記述されたimg要素の順番でイベントが発生するわけではありません。
また、ページを読み込むごとに順番は異なります。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。