如何使用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屋！