2

JavaScriptの画像ローダーを作りたいです。

これは私が試すものです:

function ImgLoader() {

   this.imgs_ = {
       0 : {name: "floor", img: new Image()},
       1 : {name: "highlight", img: new Image()},
       2 : {name: "player-north", img: new Image()},
       3 : {name: "player-south", img: new Image()},
       4 : {name: "player-west", img: new Image()},
       5 : {name: "player-east", img: new Image()},
       6 : {name: "food_small", img: new Image()},
       7 : {name: "food_medium", img: new Image()},
       8 : {name: "food_large", img: new Image()},
   };

}

 ImgLoader.prototype.load = function() {

 for (var i = 0; typeof(this.imgs_[i]) != "undefined"; i++)
     this.imgs_[i].img.src = "img/" + this.imgs_[i].name + ".png";
 }

この方法では、画像の「配列」があり、後で簡単に作業できます。ただし、一部の画像が完全に読み込まれていない場合があります。

この種のローダーを作成する最良の方法は何ですか?

ありがとう ！

わかりました Šime Vidas は非常に良い解決策を言いました... しかし: 画像が完全にロードされているかどうか確信が持てません!

これはコードです：

var imgs = Object.create( null ); // or var imgs = {};

[
   'floor',
   'highlight',
   'player-north',
   'player-south',
   'player-west',
   'player-east',
   'food_small',
   'food_medium',
   'food_large'
].forEach(function ( name ) {
    var img = new Image;
    img.src = 'img/' + name + '.png';
    imgs[ name ] = img;
});

用途は：

imgs.food_small;

しかし、このように Image complete プロパティをチェックすると

console.log(imgs.food_small.complete);

時々私たちは見ることができます: false

forEach で次の画像をロードする前に、「onload」のようなイベントを待つべきだと思います

4

2 に答える 2

1

これは私がそれを行う方法です：

var imgs = Object.create( null ); // or var imgs = {};

[
    'floor',
    'highlight',
    'player-north',
    'player-south',
    'player-west',
    'player-east',
    'food_small',
    'food_medium',
    'food_large'
].forEach(function ( name ) {
    var img = new Image;
    img.src = 'img/' + name + '.png';
    imgs[ name ] = img;
});

これで、次のように個々の画像を取得できます。

imgs.food_small

例えば：

ctx.drawImage( imgs.food_small, 0, 0 );
于 2012-07-03T20:33:01.173 に答える
0

まず、この関数をそのまま挿入します 

function preload(arrayOfImages) {
            $(arrayOfImages).each(function(){
                $('<img/>')[0].src = this;
            });
        }

使用するには、以下の関数にすべての画像を挿入します。

jQuery(document).ready(function(){
    preload([
        '/images/image1.png',
        '/images/image2.png'
    ]); 
});
于 2012-07-03T20:31:43.743 に答える