にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

特定の画像の読み込みが完了したら何かする方法 [イベント]

画像の読み込み完了を待ってから、JavaScriptで何らかの処理(スクリプト)を実行させたい場合の記述方法を解説。onload属性に関数を指定することで実行する方法と、addEventListenerを使って画像のloadイベントに処理を追加する方法の2通りを紹介しています。画像の読み込み完了時に表示を変化させることで、待ち時間を紛らわすなどにも活用できるでしょう。

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

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

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

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

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

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

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

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

桜

Loading... ただいま画像を読み込み中……

▲上記の画像が表示されたら、画像右側の文字が変化します。

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

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

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

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

JavaScriptソース

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

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

HTMLソース

<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名が割り振ってあるとします。

HTMLソース

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

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

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関数を実行するよう指定

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

JavaScriptソース

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

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---