Loading Icon - Javascipt

[jwwceo]

I have a slideshow on my website which needs to load about 25 images which are 640 by 480....so it takes a few seconds. While loading these images are splashed in the middle of the slide show area and it looks pretty bad.

 

I'd like to hide this DIV until the page is done loading and replace it with a little loading icon animated gif.

 

I know I will need to probably cover one DIV with another one, or hide the slideshow div and replace it with the animated gif, until the page is done loading. But I an not too familair with Javascript...so any pointers in the right direction would help out a ton.

 

Best,

 

James

[s0c0]

Tricky.  You need a way to determine when the last image has finished loading.  For hiding the images loading simply set them inside a div block with display:none

 

<div id="imgDiv" style="width:auto; height:auto; display:none; z-index:50;">
</div>
<div id="loading" style="width:auto; height:auto; z-index:100;">
<img src="loading.gif">
</div>

 

You must position the loading div on top of the imgDiv.  When the images are finished loading the following javascript must execute:

 

document.getElementById("imgDiv").style.display = 'block';
document.getElementById("loading").style.display = 'none';

 

but instead of block you may want to use inline.  It is up to you to find out how to determine when the images have stopped loading.  I presume javascript has a built in function for determining when the page has completed loading.  Just google that.

[jwwceo]

Thanks. I got it to work...your post helped a ton.

 

I ended up putting the onload event on the last arrow, which doesn't load until all the loops for products are done..

 

you can see it here:

 

http://www.boozingtees.com/slideshow.php?cat=252

 

Thank!!!!

[Yesideez]

Did you test this in Firefox?

 

All I get is a rotating circle of small lines for infinity...

[jwwceo]

Yes,

I tested in Firefox and it worked for me...this is the code I am using. Is there anything fundamentally wrong that wouldn't work in some browsers.

 

This function is attached to the last image to load..

 

function slide_load()
{
document.getElementById("example_7").style.display = 'none';
document.getElementById("example_9").style.display = 'none';


document.getElementById("example_6").style.display = 'block';
document.getElementById("example_8").style.display = 'block';
}