Jquery 可以知道我的 gif 动画何时结束吗? [英] Can Jquery know when my animated gif has ended?

问题描述

我想知道是否可以播放动画 gif，然后在 gif 动画结束后通过 jquery 触发一个事件.完成后，它会循环回到队列的开头，并再次播放 gif then 事件.

如果你看看我的 jfiddle，我制作了一个人打字的小 gif.然后当他抬头并得到一个想法时，我希望那个想法"div 更改为其他内容.我非常希望他头顶上的那个词是同步的，并在他的头突然出现时立即改变.

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

惊人的想法
<div id="firstgif"><img src="http://i.imgur.com/pcc4DP5.gif"/>

解决方案

我对此的回答类似于这个答案和这个关于类似的stackoverflow问题.

如果您的 GIF 有固定帧数且没有循环，您可以让 javascript 使用 setTimeout 来触发您的事件.尽管如此，它很可能会不同步，因为您正在玩一个猜谜游戏，每次 GIF 的渲染是否会以与 javascript 执行相同的速度进行.

更安全的选择是我链接的另一个答案以您使用 sprite map 来模拟动画.这是通过使用 javascript 更改元素中图像的背景位置来实现的.通过这种方式，您可以更好地控制动画的动画方式，更好地控制 javascript 事件和更好的计时，因为它与 javascript 执行速度相关/它只会在您告诉它的动画帧中.

我没有示例，但是如果您在这方面有一个不错的开端或有任何其他问题，我很乐意为您提供帮助.

关于 CSS 精灵的有用信息

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>

解决方案

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

这篇关于Jquery 可以知道我的 gif 动画何时结束吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！