Using loading.gif images [Archive] - Dynamic Drive Forums

View Full Version : Using loading.gif images

mobius2000

06-24-2008, 02:59 AM

Hi everyone, I apologise in advance for such a n00b question. I have found some stuff online pertaining to the following question however it is a little over my head. :confused:

I am creating a advertising portfolio where I will be preloading several hi res images for those viewers who are happy to wait. In order to add a touch of professionalism to the site I was wanting to add a load.gif image until the image is completely loaded and then displayed.

Simply put, I have one large image in a DIV, i am able to place the loading.gif underneath however I am wanting to hide the large image until it is fully loaded so it simply flashes up over the top of the loading.gif instead of blinds it's way down the div area.

Did that make any sense at all? :D

If anyone is able to point me in the right direction for this it would be greatly appreciated.

PS: I am using simple HTML, no server side includes or anything like that (again, too much for my pea size brain to deal with). :eek:

Richard.

techietim

07-01-2008, 01:02 AM

This isn't exactly what you want, but it should help you along:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript">
function _onload(){
document.getElementById('loading').style.display = 'none';
}
</script>
</head>
<body onload="_onload()">
<div id="loading" style="position: absolute; top: 5px; right: 5px; background: #FF0000; color: #FFF; padding: 3px; font-size: 12px;">
Loading...
</div>


<img src="http://upload.wikimedia.org/wikipedia/commons/e/e2/Theodore_Rooseveltnewtry.jpg" alt="" />

</body>
</html>

mobius2000

07-09-2008, 01:03 AM

Thank you TechieTim, wasn't exactly what I was after however yours achieves the same out come so I take my hat off to you sir... Your a life saver.

Just out of curiosity to you or anyone who views this, using the same technique as above, is there anyway of making the layer fadeout instead of disappear?

Not a huge trouble if it can't or if too hard however I have searched everywhere and I'm afraid I am just having no luck with examples/tutes for onload fadeout of layers.

Thank you in advance to anyone who is able to help further and thank you again TechieTim.

Nile

07-09-2008, 01:23 AM

Does this page help you out?:
http://github.com/madrobby/scriptaculous/wikis/effect-fade
Download scriptaculous at http://script.aculo.us/.

mobius2000

07-10-2008, 02:03 AM

Thank you soooo much, that is great.... Thank you to techietim and Nile for all your assistance here.

Nile

07-10-2008, 02:22 AM

I'm glad to help you, mobius.