3

JavaScript ゲームを作成していて、すべての画像が読み込まれた後にアラートを出したいです。このコードを試しましたが、うまくいきません:

function loadEveryThing() {
  var imgNumber = 0;

  img1 = new Image();
  img1.src = "1.png"
  img1.onload = function() {
    imgNumber = imgNumber + 1;
  }

  img2 = new Image();
  img2.src = "2.png"
  img2.onload = function() {
    imgNumber = imgNumber + 1;
  }

  img3 = new Image();
  img3.src = "3.png"
  img3.onload = function() {
    imgNumber = imgNumber + 1;
  }

  if (imgNumber == 3) alert("done")
}
4

3 に答える 3

2

画像は非同期で読み込まれます。チェッカー コードは、画像が読み込まれる前に実行されます。画像の読み込みごとにチェックを行うことをお勧めします。何かのようなもの：

function loadImages(urls,callback){

  //counter
  var counter = 0;

  //checking function
  function check(){
    counter++;
    if(urls.length === counter) callback();
  }

  //for each image, attach the handler and load
  for(var i = urls.length; i--;){
    img = new Image();
    img3.onload = check;
    img.src= urls[i]
  }

}

loadImages([/*array of urls*/],function(){
  //this function fires when all images have loaded
});
于 2013-08-09T03:43:49.963 に答える
1

次の方法でそれを行うことができ、私のブログ投稿でこのコードの詳細を読むことができます

var imgLoaded = 0;
var imgToLoad = 10;
var onImgLoad = function()
{
   imgLoaded++;
   if(imgLoaded == imgToLoad)
   {
      alert("done");             //Call to our draw function
   }
}

for(var i = 0; i < 10; i++)
{
  images[i] = new Image();
  images[i].onload = onImgLoad;
  images[i].src = 'images/'+i+'.png';
}
于 2013-08-09T19:43:51.990 に答える