1

と呼ばれるオブジェクトの変数をループすることで、画像のすべてのオンロード関数を作成するためのショートカットを作成したかったのですGameImages。Chrome で開発者コンソールを見ると、画像が読み込まれない理由がわかりません。for ループが画像の読み込みを中断していませんか? 各オンロード関数を記述する代わりに、ループで画像をロードするにはどうすればよいですか?

var i = 1; //set increment variable

var GameImages = { //object to hold each image

    game1 : new Image(),
    game2 : new Image(),
    game3 : new Image(),
    game4 : new Image(),
    game5 : new Image(),

};

for(gameImage in GameImages) { //loop through each image

    gameImage.onload = function () { //set the onload function for the current image

        gamePosters.push(gameImage);
        console.log(gamePosters.length); //print out the new size of the gamePosters array

    };

    //give source of image. (my images are named game1.jpg, game2.jpg, etc.)
    gameImage.src = "images/assets/posters/games/game" + i + ".jpg";

    i += 1; //increment i
}
4

1 に答える 1

1

これは、for (gameImage in GameImages)ループが GameImage オブジェクトの各プロパティをループしているためです (つまり、gameImage は最初に「game1」、次に「game2」など)。コードを次のように変更します。

for (game in GameImages) {

   var gameImage = GameImages[game]; // This will get your actual Image
   gameImage.onload = function () { 

       gamePosters.push(gameImage);
       console.log(gamePosters.length); 

   };

   //give source of image. (my images are named game1.jpg, game2.jpg, etc.)
   gameImage.src = "images/assets/posters/games/game" + i + ".jpg";

   i += 1; //increment i
}
于 2013-02-20T21:39:49.803 に答える