如何在JavaScript中為復雜對象上的圖像設置加載事件

Question

我在javascript中加載了很多圖像，這些圖像將在非常不同的上下文中使用。 為了在不同的上下文中輕松訪問它們，我創建了一個樹形對象。 像這樣：

var imgs = {
  scene: new Image(),
  character1 :{
    left: {
       stand: new Image(),
       kick: new Image(),
       ...
    }
    right: {
       stand: new Image(),
       kick: new Image(),
       ...
    }
  character2 :{
    left: {
       stand: new Image(),
       kick: new Image(),
       ...
    }
    right: {
       stand: new Image(),
       kick: new Image(),
       ...
    }
}

然后我加載了圖像：

imgs.scene.src = "scene.jpg";
imgs.character1.left.stand.src = "char1stand.png";
imgs.character1.left.kick.src = "char1kick.png";
...

現在，我想提出一種可靠的方法來將事件附加到它們。 但是問題是我所擁有的關卡數量。 有沒有一種方法而不必進入復雜的for-in循環系統？

Answer 1

由於您希望所有處理程序都相同，因此可以在創建圖像時進行設置。

var imagesLoaded = 0,
    total = 50; // set the total amount of images you have

function allLoaded() { /* do some stuff when all images are loaded */ };

function loaded() { // handler attached to all images
    // increase counter, if total is reached call allLoaded handler
    if (++imagesLoaded == total) allLoaded();
    /* do some more stuff */
}

function createImg() {
    var img = new Image();
    img.onload = loaded;
    return img;
}

現在，將所有new Image()替換為imgs對象中的createImg() 。