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 i
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