Display loading graphic while images load in website.

[jeremydowe]

Hi,

I have noticed that quite a few websites use a preloading graphic (i.e spining circle) to show the that the site is loading images while the user waits.

How can I add this to my website?

At the moment, i have a request after click on a thumbnail which loads an image below using the innerHTML property.

For example:

// change innerhtml
function writeExplain(objectID, title, value, description){
var object = document.getElementById(objectID);
object.innerHTML = title + '<br>' + value + '<br>' + '<p class=clear>' + '</p>' + description;
}

i want something like this (but this code is not right)

// change innerhtml
function writeExplain(objectID, title, value, description){
var object = document.getElementById(objectID);
for(var i=0; i<document.images.length; i++) {
if(document.images[i]){
object.innerHTML = title + '<br>' + value + '<br>' + '<p class=clear>' + '</p>' + description;
}else{
object.innerHTML = '<div class=loading><img src=images/loading.gif /></div>';
}
}
}

What seems to happen is that the browser loads everything first on my one paged site (i am using a lot of layers to hide show content).

Have a look at my website: http://www.jeronimo.net.au/jeronimo.html

Any suggestions of what js functions i need to write to start this.

Jez.

[acoder]

Try having a layer that contains the image. Then set the visibility to visible and hide it when the image is ready.

[jeremydowe]

Try having a layer that contains the image. Then set the visibility to visible and hide it when the image is ready.

what's the best way of checking if the image is loaded?
is that document.all or document.images[i] ?

jez.

[acoder]

You can use onload on the image object. Or you can use the complete property, see link.