Is it possible to count how many times an animated gif has played with javascript/jquery?
Asked
Active
Viewed 942 times
2 Answers
4
Nope, that's not possible.
However, you could create an interval using setInterval with the duration of the animation which increases a counter.
ThiefMaster
- 310,957
- 84
- 592
- 636
-
it's as close as you'll get with a GIF anim, but it's no good enough because you can't set it going at the moment when the image starts animating. – Spudley May 22 '12 at 22:45
-
nor can you predict how fast the browser will actually animate said GIF – DA. May 22 '12 at 22:46
-
3@Moiblpadde instead of 'thanks anyway' click the green checkmark to give ThiefMaster credit for the answer. – DA. May 22 '12 at 22:47
-
He'll have to wait 10 more minutes to do so. – ThiefMaster May 22 '12 at 22:47
-
@ThiefMaster Just a few sec faster than me :D – Mobilpadde May 22 '12 at 22:48
3
As @ThiefMaster says, You can't do this with a GIF anim.
However, you can achieve what you want using a javascript animation.
Rather than saving the frames of the animation in a GIF anim, save them in a single PNG file, in a row (ie so it looks like a reel of film) either horizontally or vertically.
Display the image in an element on the page that is sized so you can only see one frame of the animation at a time, and then use Javascript to adjust the CSS offset of the image at regular intervals using setInterval or setTimeout.
This technique is known as CSS Sprite animations. It's easy to do, and it's basically the standard way of doing spot graphic animations on the web now (GIF anims are soooo 1998).
Google will give you plenty of resources to help you find out more: https://www.google.com/search?q=css+sprite+animations
You might also want to read the accepted answer to this question: Why not animated GIF instead of animated CSS sprites?
-
Don't forget about SVG animations, which can use javascript directly on the SVG DOM, but also support a declarative style. http://www.w3.org/TR/SVG/animate.html – sehe May 22 '12 at 23:08
-
@sehe - good point. However for this question I'd stick with CSS sprites, as they'll be easier to convert from an existing animGIF. – Spudley May 22 '12 at 23:12