jquery - Jquery 可以知道我的 gif 动画何时结束吗？

Question

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

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

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

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

<div id="firstgif">
    <img src="http://i.imgur.com/pcc4DP5.gif"/>
</div>

Answer 1

我对此的回答类似于 this answer和 this one关于类似的 stackoverflow 问题。

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

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

我没有示例，但如果您在这方面取得了不错的进展或有任何其他问题，我很乐意为您提供帮助。

Useful information regarding CSS Sprites