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

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

ページで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>

JS コード例

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の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要素の順番でイベントが発生するわけではありません。
また、ページを読み込むごとに順番は異なります。

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

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