特定の画像の読み込みが完了してから何かの処理を実行する方法

ウェブ上でスクリプトを実行するとき、いきなり実行するのではなく、何らかのオブジェクトの読み込みが完了してから実行を開始したい、という場合があります。
例えば、

• ウェブ上の特定の画像の読み込みが完了してから何らかの処理(たとえばスライドショーとか)を実行したいとか、
• 特定の画像の読み込みが完了したら、読み込み待ち時間を紛らわすための表示を終了したいとか、

そういう場合です。
そんなときには、「ある画像の読み込みが完了したかどうか」を判別できると便利です。

超簡単なのは、img要素にonload属性を付加して、実行したい関数を指定することです。
が、それだとHTML側にJavaScriptを書かねばならんのであまり望ましくない、と思う場合は、JavaScript側だけでaddEventListenerを使ってloadイベントに処理を追加する方法もあります。
ここではその両者について記述方法を紹介してみます。

なお、画像ではなくウェブページそのものの読み込みが完了したときに何かを実行したい場合は、別途記事「ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ」で紹介していますのでそちらをどうぞ。

画像の読み込み中と読み込み完了後で表示を変化させる例

以下のボックスは、最初は「ただいま画像を読み込み中……」と表示されていますが、ボックスに含まれる画像の読み込みが完了したら「読込完了しました！」という表示に変わります。

画像のサイズが小さいので、高速回線だと変化が見えないかも知れませんが…。
このように、画像の読み込みが完了したタイミングを待って、何らかのJavaScriptを実行させることができます。

画像の読込完了時に何か処理を行う方法1：onload属性に関数を指定する

HTMLソース側にonload属性を加えても構わないなら、以下のように記述できます。

まずは、画像の読み込み完了後に実行したいJavaScriptを関数として記述しておきます。

function ImageGuide() {
   document.getElementById('imagemessage').innerHTML = '読込完了しました！';
}

次に、画像を作るHTMLソースに、上記で用意したスクリプト(関数)をonload属性値に指定して呼び出すよう記述します。

<div>
   <img src="sakura.jpg" alt="桜" onload="ImageGuide();">
   <p id="imagemessage">ただいま画像を読み込み中……</p>
</div>

先にJavaScriptで、ImageGuide関数を作成しています。このスクリプトは、「imagemessage」というidの振られた要素の文字列を変化させる処理を行います。
HTMLでは、img要素で画像を表示していて、その中にonload属性で先ほどのスクリプト（ImageGuide関数）を呼び出しています。ですから、画像の表示が完了したら、ImageGuide関数が実行されます。
そして、ImageGuide関数が対象とする文字列を、最後にp要素で記述しています。「id="imagemessage"」と記述して、idを付加しています。
こんな感じで、「読込完了を待ってから何かを実行する」ことが可能です。

画像の読込完了時に何か処理を行う方法2：addEventListenerを使ってloadイベントに処理を追加する方法

HTML側に呼び出す関数名を記述したくない場合は、addEventListenerを使って以下のように記述できます。

まず、画像を表示するHTMLソースには、以下のようなid名が割り振ってあるとします。

<div>
   <img src="sakura.jpg" alt="桜" id="target-image;">
   <p id="imagemessage">ただいま画像を読み込み中……</p>
</div>

次に、以下のようにJavaScriptを記述します。

function ImageGuide() {
	document.getElementById('imagemessage').innerHTML = '読込完了しました！';
}
document.getElementById('target-image').addEventListener("load", ImageGuide);

上記のJavaScriptソースでは、

• 1～3行目で、画像の読み込み完了後に実行される関数ImageGuideを定義しておき、
• 4行目では、
  • document.getElementById('target-image') で、id名が「target-image」の要素を特定し、
  • addEventListener("load", ImageGuide ); で、loadイベントが発生した際に ImageGuide関数を実行するよう指定

しています。
なお、以下のように匿名関数を使って処理を記述することもできます。

document.getElementById('target-image').addEventListener("load", function(event) {
	document.getElementById('imagemessage').innerHTML = '読込完了しました！';
});

どちらのJavaScriptも実行結果は同じです。
このように、ウェブ上の特定の画像の読み込みを待ってから何らかの処理を実行することができます。

(更新日：2017年06月04日)