jQuery: How to check when all images in an array are loaded?

Question

I have an array of images (the exact number of images varies), and when they all load I want some code to execute.

I tried this but it doesn't work:

myImgArray.load(function(){
    alert('loaded');
});

I get

33: Uncaught TypeError: Object [object Object],[object Object],[object Object],[object Object] has no method 'load'

I don't think a for loop or something similar would work because the images might, and probably will, load in 'random' order.

Answer 1

The only way I know of to do it is to attach a load handler for each image and keep a count of how many have been loaded. When you reach your total, then they've all been loaded.

Here's code that does that:

var urls = [
    "http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg",
    "http://photos.smugmug.com/photos/344292111_SvSfK-Ti.jpg",
    "http://photos.smugmug.com/photos/344291168_nErcq-Ti.jpg"
];

var imgs = [];
var cnt = 0;

for (var i = 0; i < urls.length; i++) {
    var img = new Image();
    img.onload = function() {
        ++cnt;
        if (cnt >= urls.length) {
            // all images loaded here
        } else {
            // still more images to load
        }
    };
    img.src = urls[i];
    imgs.push(img);
}

You can see it in action here: http://jsfiddle.net/jfriend00/7KF7V/

For this to work, the onload handler function has to be assigned before the .src property is set because if the image is in the browser cache, onload may fire immediately before .onload is assigned, thus missing the event.