Question

I’m using this code to preload all the images I need

var cache = [];
function preloadImages() {
    var i;

    $("#loading").html("loading...");
    for (i = 0; i <= 180; i++) {
        var src = source.replace("###", i);

        var cacheImage = document.createElement("img");
        cacheImage.src = src;

        cache.push(cacheImage);
    }
    $("#loading").html("loading completed");
}

And with that $(“#loading”).html stuff I was expecting to wait untill the loop ends to change the content, but it does not happen. It writes almost instantaneously “loading complete”, while firebug tells me that the images are still downloading.

How can I make this work as expected? Why is this not working as one may expect?

Thanks.

Answer 1

Keep a images remaining counter and use load event of image tag to decrement this counter. When the image count is 0 that means all the images are download then you can show the loading completed message.

var cache = [];
function preloadImages() {
    var i, imagesRemaining = 180;

    $("#loading").html("loading...");
    for (i = 0; i <= 180; i++) {
        var src = source.replace("###", i);

        var cacheImage = document.createElement("img");
        $(cacheImage).bind('load abort error', function(){ 

           if(imagesRemaining-- == 0){
              $("#loading").html("loading completed");
           } 

        });
        cacheImage.src = src;

        cache.push(cacheImage);
    }
}