Setting GIF loop count and publishing stop event using JavaScript

Question

Is it possible to set the loop count of a GIF image using JavaScript and then publish an event when it stops playing?

For example something like:

//html code
<img src="myImage.gif" id="img1"/>

//Javascript code
var image = document.getElementById('img1');

//Image must stop playing after 3 loops
image.setLoopCount = 3;

The answer is _"No, not using JavaScript and an actual animated GIF"._ All the answers so far are helping you with alternatives, but are forgetting to provide this fundamental answer. — Phrogz, Nov 17 '11 at 19:05

bisu · Answer 1 · 2011-11-17T18:45:50.100

3

here is how i would suggest doing it:

extract frames form gif file (you can do it online using for instace -> http://imgops.com/)
use javascript to change pictures, simulating animation (that way you can keep track of how many loops you have done)

Here is a jsFiddle link http://jsfiddle.net/qustosh/n5zWH/9/ I used jQuery. I did three loops and i threw a callback function at the end.

edited Nov 17 '11 at 18:45

answered Nov 17 '11 at 17:10

bisu

31
2

score 0 · Answer 2 · answered Nov 17 '11 at 18:55

For a design side solution, you can set the GIF image to only loop a certain number of times with Photoshop. Then just use window.setTimeout(callback, milliseconds) to trigger your custom event.

You can calculate the time out from the interval used to display each frame of the animation.

Setting GIF loop count and publishing stop event using JavaScript

2 Answers2