重新启动动画 Gif答案

【问题标题】：Restarting animated Gif重新启动动画 Gif
【发布时间】：2010-10-25 08:38:34
【问题描述】：

我想在我的画廊轮换脚本中设置一个计时器。这个计时器是一个圆形动画 gif。我希望它在加载新图像时重新启动..

我原以为这会起作用，但显然不行。

// Loader needs to be a Global
loader = new Image();
loader.id = "loader_graphic";
loader.src = "images/loader.gif";
var $container = $('#slider .imgs').cycle({ 
 fx:     'scrollHorz', 
 speed: 1000,
 timeout: 5000,
 before : function() {
  resetLoader();
 }
});

function resetLoader() {
 $("#loader_graphic").remove();
 $("#loader").append(loader);
}

有没有人有任何解决这个问题的想法。如果这不起作用，有谁知道如何实现这个效果？

【问题讨论】：

标签： javascript jquery animated-gif

【解决方案1】：

您的 javascript 代码在重置时没有重新创建变量，也许将变量设置为新创建的 dom 元素会起作用？

// Loader needs to be a Global
var loader = newLoaderImage();

var $container = $('#slider .imgs').cycle({ 
  fx:     'scrollHorz', 
  speed: 1000,
  timeout: 5000,
  before : function() {
    resetLoader();
  }
});

function newLoaderImage() {
  i = new Image();
  i.id = "loader_graphic";
  i.src = "images/loader.gif";
  return i;
}

function resetLoader() {
  $("#loader_graphic").remove(); // or loader.remove();
  loader = newLoaderImage();
  $("#loader").append(loader);
}

【讨论】：

【解决方案2】：

也许您可以使用 JavaScript 解决方法，但重新启动是 gif 图像的一个选项，修改它会更简单（例如使用 gimp）。

【讨论】：

【解决方案3】：

一种方法可能是使用两张图片：一张动画 gif 和一张显示动画“停止”帧的静态 gif。

将它们放在同一个位置。加载图像时，显示动画 gif（可能使用 visibility:visible; 并隐藏停止的动画，使用 visibility: hidden;。当您需要停止动画时，隐藏动画 gif，并显示停止的图像。

【讨论】：