Question

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

Answer 1

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

创建静态图像（可以是任何格式，JPEG，PNG，GIF），每个图像都包含原始动画的帧其他。像这样：

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

然后你可以用一个框架的尺寸创建一个<div/>，并将这个长静态图像设置为背景，然后每隔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);
});

更新

Google对+1按钮做了相同的操作，但他们是在水平而非垂直方向上进行的，就像上一个示例：check it here。

Answer 2

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

Answer 3

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

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

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

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

3 个答案:

经过测试的代码

更新