如何判断gif是否已使用jquery完全动画化

如果我有一个动画gif只运行一个动画，IE。 它没有循环，有没有办法使用jquery，或任何事情，告诉动画何时完成？ 我不想告诉文件是否完全加载，但是动画已经运行了。

Answer 1

我认为没有办法从javascript中检测到它。 我会选择不同的解决方案。

创建静态图像（可以是任何格式，JPEG，PNG，GIF），其中原始动画的帧彼此相同。 像这样：

┌───┐ │ 1 │ ├───┤ │ 2 │ ├───┤ │ 3 │ ├───┤ │ 4 │ └───┘ 

然后你可以用一个框架的尺寸创建一个

，并将这个长静态图像设置为背景，然后每隔n毫秒移动一次背景。

经过测试的代码

 $(function() { var width = 20, height = 20, frames = 3; var $div = $(document.createElement('div')) .css({ backgroundImage: 'url(test.png)', width: width + 'px', height: height + 'px' }) .appendTo(document.body); var frame = 0; setInterval(function () { frame++; if (frame > frames) { frame = 0; } $div.css('background-position', '0 ' + -1 * frame * height + 'px'); }, 250); }); 

更新

谷歌使用+1按钮做了同样的事情，但他们是在水平而不是垂直方向上做的，就像上一个例子一样： 在这里查看 。

Answer 2

你不能。 GIF没有事件处理程序。

Answer 3

答案很复杂，但确实有可能，但是你需要一个服务器端语言，比如PHP（除非你知道GIF总是相同并具有相同的已知持续时间）。

这个想法是你读取GIF文件的内容，因为动画GIF被分成每个都有自己标题的帧。 阅读这些标题以获取帧数和每帧之间的时间。

然后，您可以计算出动画的持续时间(No. of frames x FPS) 。 使用jQuery预加载GIF，当它完全加载时显示它，然后等待它的动画持续时间。