can javascript detect when an image has loaded?

[DaveNZ]

Hi, I have been writing a script to reload images without reloading the page.

 

At the moment, while the images are loading the inner HTML of a span tag changes to "Loading" and then setTimeout is used to empty the span again 4 seconds later.

 

However on a slow connection the images can take longer than 4 seconds to load, so the "Loading" phrase disappears before the images have actually loaded.

 

Preferably I would like "Loading" to disappear after all the images have loaded. Is there some way to detect this?

 

 

[DaveNZ]

Actually I figured out another way, preload a loading image into the document and display that first when the changeImage function is called, then load the new images

[Adam]

FYI there is actually the Image.complete property, that stores a boolean value of whether the browser has loaded the image.

[DaveNZ]

Thanks, that's useful information. 

[Wildbug]

There's also the onload property of IMG.  You can set it to do something when the image finishes loading.  If you need to do something once all of the images have loaded, you could use a counter and fire that code once the counter has reached zero.  It is important that you set the onload callback before you set the src property of the image as it may not fire if the image is loaded from cache.

 

function loadMyImages() {
    var counter = 0, image;

    function imgCallback() {
        if (--counter) return;
        // hide the "Loading" SPAN here
    }

    /* show the "Loading" SPAN here */

    for (var i = 0; i < 5; i++) {
        image = document.createElement('IMG');
        image.onload = imgCallback;
        counter++;
        image.src = "image" + i + ".jpg";
    }
}