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.

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?

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).

Richard.

**techietim** · 07-01-2008, 01:02 AM

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

HTML Code:

<!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>

<!-- YOU IMAGES HERE -->
<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.