我想知道是否有可能播放动画 gif，然后在 gif 到达其动画结束时通过 jquery 触发一个事件。一旦这样做了，它就会循环回到队列的开头，并再次播放 gif then 事件。
如果你看看我的 jfiddle，我制作了一个人打字的小 gif。然后当他抬起头并得到一个想法时，我希望那个“想法”的 div 变成别的东西。我非常希望他头顶上的那个词能够同步并在他的头弹出时立即改变。
<div id="thought">
Amazing Idea
</div>
<div id="firstgif">
<img src="http://i.imgur.com/pcc4DP5.gif"/>
</div>
【问题讨论】：
我对此的回答类似于 this answer 和 this one 在类似的 stackoverflow 问题上。
如果您有一个帧数固定且没有循环的 GIF，您可以让 javascript 使用 setTimeout 来触发您的事件。尽管如此，它很有可能不同步，因为您正在玩一个猜谜游戏，GIF 的渲染是否会以与每次 javascript 执行相同的速度播放。
一个更安全的选择是我链接的另一个答案所说的你使用sprite map 模拟动画的方式。这是通过使用 javascript 更改元素中图像的背景位置来实现的。这样，您可以更好地控制动画的动画效果，更好地控制 javascript 事件和更好的时机，因为它与 javascript 执行速度相关/它只会在您告诉它所在的动画帧处。
我没有示例，但是如果您在这方面有良好的开端或有任何其他问题，我很乐意提供帮助。
【讨论】：
setTimeout 提出的建议，如果图像没有循环，那将是最好/最简单的，因为您需要动画在特定位置停止。 （如果您不能这样做，其他替代方法是在超时触发后将动画 gif 切换为静态结束帧）
onload 事件。虽然我不知道如何主动知道它何时完成“播放”，但我的评论涉及提前知道动画播放多长时间并专门设置超时。 setTimeout 可能无法准确保证 X 毫秒，但它确实保证 至少 X 毫秒，因此对于非循环 gif，最坏的情况是它会在最后一帧上等待很短的时间。