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 が実行される仕組みです。
ちゃんとしたローダみたいなのを作るまでもないような場合にはいいコードだと思います。
ちなみに、画像が読み込まれたらコールバックしてくれる、ちょうどいいライブラリもありました。
とても優秀なのでこっちを使ったほうが簡単かもしれません。