如何在JavaScript中为复杂对象上的图像设置加载事件

Question

I'm loading a lot of images in javascript that are going to be needed in very different contexts. To easily access them in different contexts I created a tree-kind-of object. Something like this:

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(),
       ...
    }
}

Then I loaded the images:

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

Now I want to make a reliable method to attach an event to them. But the problem is the amount of levels I have. Is there a way of doing this without going into a complex system of for-in loops?

Answer 1

Since you want the handler being the same for all, you can set it up when you create the images.

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

Now replace in your imgs object all new Image() with createImg() .