자바 스크립트 다중 이미지 로더

Question

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"; 
} 

, 나는 내 이미지의 "배열"을 가지고, 내가 나중에 쉽게 작업 할 수 있습니다 :

이 내가 시도 할 것입니다. 하지만 이미지가 거의로드되지 않는 경우가 있습니다.

이런 종류의 로더를 만드는 가장 좋은 방법은 무엇입니까?

감사합니다.

---

좋아 SIME 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; 

하지만 때로는 우리가 볼 수있는이

console.log(imgs.food_small.complete); 

같은 이미지 완전한 속성을 확인하면

생각합니다. 그것을 사용하여 다음 기능으로 모든 이미지를 삽입하려면

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

이기 때문에 우리는이 기능을 foreach는

Answer 1

이

내가 그것을 할 거라고 어떻게 당신은 이것을 위해 jQuery를 사용할 수 있습니까?

Answer 2

처음에로드하기 전에 '온로드'와 같은 이벤트에 대해 다음 이미지를 기다려야 삽입해야한다. 예를 들어

imgs.food_small 

:

ctx.drawImage(imgs.food_small, 0, 0);