javascriptにて画像をプリロードしたい

javascriptで画像を先に読みこんでおきたいのですが、上手く行かずdrawImage処理で描画出来ない時があります。
(少し待ってからボタンを押すと表示されます)

①プリロード処理
※iは0から始まります。
function bgimgloopImageLoader(i) {
do {
bgimg[i] = new Image();
bgimg[i].src = bgimgURL[i];
i++;
} while (bgimgURL.length != i);
return true;
}

②画像を表示するボタン
function startButton() {
//最初の背景画像を表示
ctx1.clearRect(0,0,canvas1.width, canvas1.height);
ctx1.drawImage(bgimg[0],0,0);
}

bgimg[i].srcの中にURLが格納されているか確認しましたが、格納はされていました。

最初の画像が時々表示されなくなるのを防ぎたいの(2回目以降の描画処理は正しく表示される)ですが、どこへどのような処理を追加すれば良いのか分かりません。

宜しくお願い致します。

以下は処理順についての追記になります。
①<body onLoad="**onLoad();**" >
②function onLoad() {
～～～
if(imgPreload()){
if(soundPreload()){
if(scenarioLoad(scenario)){
if(topDisplay()){
document.getElementById("id_button1").style.visibility="visible";
}else{
alert("topDisplay未完了");
}
}else{
alert("scenarioLoad未完了");
}
}else{
alert("soundPreload未完了");
}
}else{
alert("imgPreload未完了");
}
}

③function imgPreload() {
//画像のプリロード
if(bgImageURL()){ //画像のurlを配列に
if(charImageURL()){
if(bgimgloopImageLoader(0)){
if(charimgloopImageLoader(0)){
return true;
}else{
alert("charimgloopImageLoader未完了");
}
}else{
alert("bgimgloopImageLoader未完了");
}
}else{
alert("bgImageURL未完了");
}
}else{
alert("bgImageURL未完了");
}
}

④**function bgimgloopImageLoader(i)**へ
処理内容は『①プリロード処理』をご参照ください。

行動規範の内容に同意します

回答2件

ベストアンサー

JavaScriptでの画像をプリロードする処理は非同期的なのです：

リストbgimg[i].srcの中にURLが格納されていても、この画像がすぐに使えるはずではありません。
bgimgloopImageLoader(i)関数からtrueを返した後でも、これらの画像が使えるまで待つべきです。

つまり、document.getElementById("id_button1").style.visibility="visible"のタイミングが違います。ボタンが表示された時、画像データの準備はまだ終わっていないかもしれません。

このように画像のonloadコールバック関数を使って、画像データの準備を待つことができます：

var bgimg[i] = new Image();
bgimg[i].onload = function () {
   alert("bgimg[" + i + "] is loaded"); // 画像がロードされました
}
bgimg[i].src = bgimgURL[i]; // 今は画像がロードされていないかもしれません