Loading Image

Rodi · #1 (**permalink**) 02-15-05, 12:32 PM

hi guys,

I want to show a loading gif animated before loading the actual image. So, if the actual image to load is too big, the user will see the gif animation before.

Thanks

TwoD · #2 (**permalink**) 02-19-05, 07:36 AM

I think you can use the onload even for the <img> tag for this.
Try somehting like this:

Code:

<body>
<img id='loadergif' src="loading.gif">
<img src="big_image.jpg" onload="document.getElementById('loadergif').style.display='none';this.style.visibility='visible';" style="visibility:hidden;">

This will make the big image invisible (but it will still occupy the same physical space on your site) until it has been loaded. It will also make the gif image dissapear using style.display. The difference between visibility and display is that display doesn't make the image occupy the same space while being invisible. The reason to why I use visibility on the big image is that my reference manual says display "does not render the image". Therefor I feared that initializing the big image with display set to none, the image won't be loaded, and thus the onload event will never fire. Try it if you'd like...