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

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 .