Callback when all images in HTML page are loaded, with custom timeout

I'm developing a HTML5 game and although there are many ways to track image loading, they mostly use XHR which does not work reliably in different browsers. I don't care about progress bars, but I do compose images after loading (using EaselJS cache) and need to make sure images are loaded before caching.

The usage is really simple. In case some of the images fail to load, or takes too long, you could have a problem that program would not go on, and user won't see anything. To avoid this, I added a custom timeout, after which the callback would be called regardless. The timeout resets after each successfull download, so don't set it too high. The example below uses 12 seconds:

// 1. create image loader
var imageLoader = new ImageLoader(12);

// 2. feed it some URLs
imageLoader.add('shadow', 'http://mycnd.com/shadow.jpg');
imageLoader.add('ball',   'http://mycnd.com/ball.png');
imageLoader.add('player', 'http://mycnd.com/player.png');

// 3. wait for load to complete and then do something with the images
imageLoader.loadAll(function() {

    // do something, like for example:
    var ballSprite = new createjs.Bitmap(
        imageLoader.get('ball'));

});

The code uses alert() in two places. Please replace that with whatever error handling you use. Also, there could be a better/faster way to detect image files that are not available (HTTP code 404 and similar), so that we don't have to wait for timeout.

View and download the source code at https://github.com/mbabuskov/ImageLoader.

Tweet to @mbabuskov Milan Babuškov, 2013-06-10