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

问题描述

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

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.

如果你看看我的 jfiddle，我制作了一个人打字的小 gif.然后当他抬起头来得到一个想法时，我希望那个想法"的 div 变成别的东西.我非常希望他头顶上的那个词能够同步并在他的头弹出时立即改变.

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>

推荐答案

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

My answer to this is similar to this answer and this one on a similar stackoverflow question.

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

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.

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

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.

关于 CSS Sprites 的有用信息

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