Question

I am working on an HTML5 Canvas game, and the level needs to pre-load some images (and eventually other data such as audio files, too). I am planning on having all of these images stored in an array, or a container object. What I need to do is find a way to wait until all of these images are downloaded completely before continuing in the game.

This does NOT happen when the page is opened. This happens deep within the running script, and the images are dynamically loaded. The idea is to display a “loading” message, and once everything is done, start the level as intended.

I have access to jQuery, but I would prefer to stick with straight Javascript code. Does the window.onload function work here since it’s not actually happening when the page loads? If no such event exists, is there a way to traverse through image objects and check if they’re loaded yet?

Answer 1

You can have a counter to check in the onload event if all the images load(or failed).
Something like

var loadedImages = 0;
var failedImages = 0;
var imageCount = amount of images
function loaded(){
    loadedImages++;
    if (loadedImages == imageCount){
        //all images successfully loaded
    }
    else if ((loadedImages+failedImages) == imageCount){
        //all images completed
    }
}
function failed(){
    failedImages++;
    if ((loadedImages+failedImages) == imageCount){
        //all images completed
    }
}
var images = array();
for (var i = 0; i < imageCount; i++){
    images[i].onload = loaded;
    images[i].onerror = failed;
    images[i].src = the image source
}