如何使用jquery判断gif是否完全动画 [英] How to tell if a gif has fully animated using jquery

问题描述

如果我有一个只运行单个动画的动画 gif，IE.它不循环，有没有办法使用 jquery 或任何与此相关的方法来告诉动画何时完成?我不想判断文件是否完全加载，但动画已经运行完毕.

If I have an animated gif that just runs a single animation, IE. it doesn't loop, is there a way using jquery, or anything for that matter, of telling when the animation is complete? I don't want to tell if the file if fully loaded, but that the animation has run its course.

推荐答案

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

I think there is no way to detect it from javascript. I would choose a different solution instead.

创建一个静态图片(可以是任何格式，JPEG、PNG、GIF)，每个图片下面都有原始动画的帧其他.像这样:

Create a static image (can be in any format, JPEG, PNG, GIF), which has the frames of the original animation below each other. Like this:

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

然后你可以创建一个<div/>，例如一个帧的尺寸，并将这个长静态图像设置为背景，然后每隔n毫秒移动一次背景.>

测试代码

Then you can create a <div/> for example with the dimensions of a frame and set this long static image as a background, then move the background in every nth milliseconds.

$(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 按钮做了同样的处理，但它们是水平的，而不是垂直的，就像前面的例子:在此处查看.

这篇关于如何使用jquery判断gif是否完全动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！