Desync two IMG tags using same animated GIF file

A colleague asked me this question, which I thought was easy until I tried to provide him an answer!  :-)

He has an HTML file that contains (among other things) two different <IMG> tags which both use the same animated GIF file as the image source.  Of course, the browser plays the GIF animations in sync.  But that's not what he wants.  (He is correct in saying that the synchronization between the two images is somewhat distracting.)

I'm probably going to have to dig up a GIF editor in my spare time (yeah, right) and build him a separate GIF that animates at a different pace and starting point, but that will probably be time-consuming.

Is there an attribute of the IMG tag, or a JavaScript trick I can use to get the two tags to desynchronize?  (Play at a different rate, or start at a different frame, or both?)

I've looked in some of my HTML documentation and the only thing I've found are the "loop" and "loopdelay" attributes, which I believe only work with AVI's, not GIF's.


Thanks in advance!
    -- outerJoin
LVL 1
outerJoinAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

snoyes_jwCommented:
Maybe use JavaScript to load the gif, set one of the image sources to something that is NOT the animated gif, then after some delay, change the src?

Like this (from http://forums.devshed.com/archive/1/2002/10/2/45235)
<head>
<script>
function changeImage() {
    var gifAnimated = 'animated_gif_source_here'
    document.getElementById('animation').src = gifAnimated;
}
</script>
</head>
<body onload = "setTimeout(changeImage,'5000')";>
<img id="animation" width="200" height="200" alt="image">
</body>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
outerJoinAuthor Commented:
Ba-BAM!  It *does* work.

I was cringing at the thought that it would probably just delay the start, but that the browser would still start all the GIFs cycling on the same boundary.

But it worked -- the cycle starts when the image gets switched out by the JavaScript.

The GIFs still cycle at the same rate, but at different starting points.

It looks to me like that is going to be enough to break up the visual distraction on the page.  [If my colleague wants more than that, I may just gently suggest he learn to use a GIF editor and build some edited copies of his original image. :-) ]

Thanks!
    -- outerJoin
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.