Setting the number of GIF cycles and posting a stop event using Javascript

Question

Is it possible to set the number of cycles of a GIF image using javascript and then post 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; 

Answer 1

Here is how I would suggest doing it:

• extract frames from a gif file (you can do it online using instace → http://imgops.com/ )
• use javascript to modify the images that simulate the animation (this way you can keep track of how many cycles you made).

Here is the jsFiddle link http://jsfiddle.net/qustosh/n5zWH/9/ I used jQuery. I did three loops, and in the end I turned on the callback function.

Answer 2

For a design-based solution, you can set a GIF image for a loop only using Photoshop. Then just use window.setTimeout(callback, milliseconds) to fire the custom event.

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