Solved

Desync two IMG tags using same animated GIF file

Posted on 2003-12-12
2
522 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:outerJoin
2 Comments
 
LVL 33

Accepted Solution

by:
snoyes_jw earned 125 total points
ID: 9929587
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
 
LVL 1

Author Comment

by:outerJoin
ID: 9929855
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

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now