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

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

Answer 3

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

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

重新启动动画Gif

3 个答案: