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;

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;

• javascript
• html
• dom-events

Share Improve this question Follow edited Sep 1, 2022 at 21:26 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 17, 2011 at 13:59 DracoDraco 16.4k2323 gold badges8181 silver badges9494 bronze badges 1

• 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 Commented Nov 17, 2011 at 19:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

here is how i would suggest doing it:

• extract frames form gif file (you can do it online using for instace -> http://imgops./)
• 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/qustosh/n5zWH/9/ I used jQuery. I did three loops and i threw a callback function at the end.

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.