Archive of UserLand's first discussion group, started October 5, 1998.
Re: prompting an animation with a mouseclick
Author: Jeremy Bowers Posted: 12/3/1999; 8:32:38 PM Topic: prompting an animation with a mouseclick Msg #: 13429 (In response to 13428) Prev/Next: 13428 / 13430
. it's as if my browser is loading both the animated & the non-animated gifs at the same time & running the animated gif in the background immediately.From the sounds of it, that's exactly what is happening. When you instantiate the Image object, the browser loads it and "executes" it, and browsers try to keep identical animated gifs in sync with each other, so when you set the real image's source to that image it is put in sync with the hidden one.
Which browser are you using? I've done this before (although I used it as a mouseover effect), but I don't recall if I was pre-loading (on the LAN it didn't matter). Let me play around here for a bit. (Do you have the gif in question available on the web?)
--
Here's the most portable solution I've been able to come up with.
I'll use [ and ] for HTML tags.
[SCRIPT] flagLoaded = false; [/SCRIPT]
[IMG SRC="to_preload.gif" HEIGHT=1 WIDTH=1 onload="if ( !flagLoaded ) { this.src=''; flagLoaded=true}" style="display:none"]
And then use the src change as you were before.
Caveats and bugaboos:
- Tested (quickly) on IE 4 and Netscape 4, both for PC, but should work in general.
- The 'style="display:none"' will cause 4+ browsers to totally hide the image, but earlier browsers will have a one pixel abberration at the location of the IMG tag. I haven't figured out how to do away with this. You could tell the image to set itself to a one-pixel transparent gif (which I did not do in the above), which would make it disappear when the image loads (put it last in the document, or very first if you can get away with it), but there will be that one pixel changing colors while the image is loading.
- You will need a flag for each image you are preloading. Consider an array. The reason you need a flag is if you simply say 'onload="this.src='somethingelse.gif'"', the onload handler will be called when the src changes, which calls the onload handler, which calls the onload handler... which will eventually cause a stack overflow. My IE4 sure knows how to handle stack overflows... crash all explorer instances.
- I have no clue how this will work with Opera or any other "fringe" browser. You may need to consider some other solution, like Flash, if that is importent to you.
This page was archived on 6/13/2001; 4:53:39 PM.
© Copyright 1998-2001 UserLand Software, Inc.