【JavaScript】複数の画像の読み込みが完了した時のイベントを感知するには??

javascript

複数のイメージ画像を読みが完了した時のイベントを感知するにはどうしたらいいのだろう!?ということでメモしておく。



やりたいこと

すべての画像を最初は非表示にしておき、すべての画像が読み込み完了した時点で「すべて読み込みました」と表示して、その後に画像を一気にフェードインするような仕組みにしてみる。

いつもは、js do itにてサンプルを作るのですが、どうやらjs do itではloadイベントが発動しないので、htmlでサンプルページを作りました。

実際のコード

とりあえずhtml・CSS・JavaScriptの必要最低限のコードを載せていきます。

htmlのコード

htmlのコードは読みこんだ枚数を表示するためのpタグと画像の読み込みが完了のpタグ。後は画像を80枚ちょっと並べてるだけです。

CSSのコード

CSSでは、最初は画像と、画像がすべて読み込まれたら表示させる文字を最初は非表示にしておきます。

JavaScriptとjQueryのコード

JavascriptとjQueryのコードを記載。DOMオブジェクトの取得とアニメーション操作はjQueryを使用。

コードの解説

htmlとCSSの記述に関しては、特に説明がいらないと思うので省きます。

必要なデータを変数に入れる

まず、必要なデータを変数にいれます。

all_img 画像のDOMオブジェクトの入れる為の変数。複数なので配列
img_len 読み込む画像の長さを保持した変数
loaded_counter 読み込みが完了したらカウントをとる為の変数

すべての画像にloadイベントを設定

変数を設定したら、画像1枚1枚にloadイベントを設定したいので、for文で画像全部にaddEventListerでloadイベントを設定します。

画像読み込み完了後にフェードイン

loadイベントは読み込み後に発生するので、その時に変数loaded_counterをインクリメント(++)で+1を加算させていき、画像の長さである変数img_lenと同じ値になった場合は、すべて読みこんだという事になります。

読み込みがすべて完了しましたら、jQueryのfadeInメソッドで読み込み完了の「すべての画像を読み込みが完了しました。」という文字を表示させて、表示が完了したらすべての画像もfadeInメソッドで表示させています。

といった感じで、まぁポイントは画像の総数とカウンター変数との値が一致したら画像の読み込みがすべて終わったよ~って感知する事ができるという感じですね。