javascript - 重新启动动画 Gif

Question

我想在我的画廊轮换脚本上放一个计时器。这个计时器是一个圆形动画 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);
}

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

Answer 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);
}

Answer 2

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

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

Answer 3

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