By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,709 Members | 1,017 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,709 IT Pros & Developers. It's quick & easy.

Display loading graphic while images load in website.

jeremydowe
P: 10
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.
Mar 14 '07 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
Try having a layer that contains the image. Then set the visibility to visible and hide it when the image is ready.
Mar 15 '07 #2

jeremydowe
P: 10
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.
Mar 15 '07 #3

acoder
Expert Mod 15k+
P: 16,027
You can use onload on the image object. Or you can use the complete property, see link.
Mar 15 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.