先読みする画像全ての読み込みが完了したら処理をする(上級)

先読みする複数の画像の全ての読み込みが完了したら、何か処理をする例になります。jQueryのDeferred/Promiseモデルをご存知の方向けになりますので、上級者向け情報になると思います。サンプルコードは、以下のようになります。

preload関数は、promiseを返すようにしています。これで、preload関数の呼び出し側で、画像読み込み後の処理を記述することができます。 見やすさ重視の為、メソッドチェーンは使いませんでしたが、.done()、.fail() で、成功、失敗時の処理を記述できます。

ざっと説明しておきますと、preload関数内で、promises配列を宣言して、その配列に各画像ごとのpromiseを格納していきます。そして、そのpromise配列に対して、$.when()を仕掛けています。不定の個数の為、ここでは、.apply()を利用しています。

正確には、onabortというイベントも存在したりしますが、これはユーザーによる読み込み停止でしょうから、このサンプルには組み込んでいません。また、場合によっては、画像が読み込み失敗しても処理を続行したい、、なんてこともあるかも知れません。そんな時は、.reject(); の部分をこっそり、.resolve(); に変更して下さい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です