Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can Jquery know when my animated gif has ended?

Im wondering if its possible to have an animated gif play, then fire off an event through jquery once the gif has reached the end of its animation. Once it does that, then it loops back to the beginning of the queue, and plays the gif then event again.

If you take a look at my jfiddle, i made a little gif of a guy typing. and then when he looks up and gets an idea, i want that "thought" div to change to something else. I pretty much want that word above his head to be in synch and change right when his head pops up.

http://jsfiddle.net/mMVhK/1/

<div id="thought">
    Amazing Idea
</div>

<div id="firstgif">
    <img src="http://i.imgur.com/pcc4DP5.gif"/>
</div>
like image 973
kingkelly Avatar asked Apr 22 '13 04:04

kingkelly


People also ask

How long a GIF can last?

How long can an animated GIF be? The same, there is no restriction on the length of a GIF. While some platforms have ruled it. (Such as, GIPHY suggests uploading a GIF no more than 6 seconds and it won't accept a 15 seconds plus GIF.)

How do you check if a GIF is animated?

Basically, if identify returns more than one line for a GIF, it's likely animated because it contains more than one image.

How do I stop an animated GIF from looping CSS?

@ddor254 it is File menu -> Save as … -> Gif - Gif options panel. Uncheck repeat forever and set Repeat count.

Can you pause a GIF Javascript?

Freezeframe. js is a library that pauses animated . gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually. With this JS library, you'll know how to pause a GIF by writing its data to a canvas element — automatically.


1 Answers

My answer to this is similar to this answer and this one on a similar stackoverflow question.

If you have a GIF with a set number of frames and without loop, you can make javascript use setTimeout to trigger your event. With this though, it has a very high chance of going out of sync simply because you are playing a guessing game whether the rendering of the GIF will play out at the same speed as the javascript execution each time.

A safer option is what the other answer I linked said in the way that you use a sprite map to simulate an animation. This is achieved by using javascript to change the background position of the image in the element. This way, you have a lot more control about how the animation animates, greater control over javascript events and better timing as it is tied to javascript execution speed / it will only be at the frame of the animation you tell it to be at.

I don't have an example however I am happy to help if you get a decent headstart on this or have any other questions.

Useful information regarding CSS Sprites

like image 58
Turnerj Avatar answered Sep 30 '22 04:09

Turnerj