Image#onload で複数の画像のロードを待って同期させたい

Canvas などに画像を描画する際に、Image オブジェクトを生成して、src にパスを渡して、画像が読み込まれたら描画処理を行う、という流れが基本。

var canvas = document.getElementById("#canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "http://dummyimage.com/64.gif?text=hello";
img.onload = function(){
  context.drawImage(img);
}

しかし、複数の画像を同時にロードし始めて、かつロードの終了を同期させたいような場合はどうしたらいいでしょう。

おなじみ Stack Overflow の投稿を参考にさせていただきました。

クロージャを上手に使って実現しています。

var Loader = function(expectedCnt, callback){
  var cnt = 0;
  return function(){
    if(++cnt == expectedCnt){ callback(); }
  }
};

// 中略
var loader = Loader(2, function(){ console.log("All images loaded!") });
img1.onload = loader;
img2.onload = loader;

渡した関数オブジェクトは 各画像オブジェクトの onload 時に実行されます。

その時に内部でもっている cnt が 1 増えます。

そして、読み込む画像数として渡した expectedCnt に一致した(つまり2個(全部)の画像が読み込み終わった)ら、callback が実行される仕組みです。

わざわざ読み込む画像の数を渡すとか、エラー処理とかにはうまく対応できないですが(いや、俺の工夫がたりないのか…?)、ちゃんとしたローダみたいなのを作るまでもないような場合にはとっても優秀なコードだと思います。

ちなみに、画像が読み込まれたらコールバックしてくれる、ちょうどいいライブラリもありました。

とても優秀なのでこっちを使ったほうが簡単かもしれません。

参考

シェアする

  • このエントリーをはてなブックマークに追加

フォローする