Jquery能知道我的动画gif何时结束吗？

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

如果你看看我的jfiddle，我就可以看到一个家伙在打字。然后，当他抬起头来，有了一个想法，我希望那个“思考”的div换成其他东西。我非常希望他头上的那个词能够同步，并且在他的头弹出时立即改变

好主意

我对这个问题的回答与一个类似的stackoverflow问题类似

如果您有一个具有设置帧数且没有循环的GIF，则可以让javascript使用

setTimeout

来触发事件。不过，如果这样做，它很有可能会失去同步，因为您正在玩一个猜测游戏，即GIF的渲染是否会以与每次javascript执行相同的速度进行

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

我没有一个例子，但我很乐意帮助你，如果你在这方面有一个体面的开端或有任何其他问题

---

您的gif路径在小提琴中不正确。。。请看一下，没有环是什么意思？它怎么可能没有循环？当你创建gif时，你通常可以选择控制动画是否循环/重复。对于我建议使用的

setTimeout

，最好/最简单的方法是图像没有循环，因为需要动画在特定点停止。（如果无法做到这一点，则在超时触发后将动画gif切换为静态结束帧）setTimeout不保证gif已加载，并且它已结束“播放”@RokoC.Buljan在检查gif是否已加载方面，您可以收听

onload

事件。虽然我不知道如何主动知道它何时完成“播放”，但我的评论涉及到提前知道动画播放多长时间，并专门设置超时时间

setTimeout

可能不能保证精确的X毫秒，它确实保证至少X毫秒，因此对于非循环gif，最坏的情况是它在最后一帧上等待很短的时间。

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

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