pre-loading GIF while animated GIF is loading

[dottieandbelle]

I have a fairly image-intensive page that has an animated GIF logo, and I'd like the page to be able to load in its entirety (including a still GIF version of the logo that's the same as first frame of animation) before the animated GIF loads so that it's a seamless experience. Does anyone know some JavaScript or other code to accomplish this?

Any advice would be great! Thanks...

 

[BillyRayPreachersSon]

Use the "lowsrc" attribute of the image tag - it's what it was designed for.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Here's more info:

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/lowsrc.asp

http://www.idocs.com/tags/images/_IMG_LOWSRC.html

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[dottieandbelle]

But how do I get the animated GIF to load last? The lowsrc thing allows the animated GIF to load while the still one is in place (which is great, by the way), but the animation is still starting (and ending) before the rest of the page is finished loading.

 

[BillyRayPreachersSon]

Sorry - I mis-read your post. If you want to wait for the whole page to finish loading, you can use something like this:

<script type="text/javascript">
<!--

   onload = setupPage;

   function setupPage() {
      document.getElementById('myLogo').src = 'someAnimatedLogo.gif';
   }

//-->
</script>

...

<img src="stillFrame.gif" width="100" height="50" alt="My logo" id="myLogo" />

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]