点击重放GIF动画/重放GIF

Question

我有一个GIF动画是很大的，我让它显示一个加载图标，直到GIF被加载。加载GIF后，GIF将显示。工作很好，但我想添加一个“重播”按钮来触发GIF重放(重装)。

加载和GIF代码：

<div id="loader" class="loading img-center"></div>

CSS

#loader {
 width: 600px;
 height: 450px;
 margin: auto; 
}

#loader.loading {
  background: url(/Images/ajax-loader.gif) no-repeat center center;
  width:32px;
  margin:auto ; 
}

JS

var $j = jQuery.noConflict();
$j(function () {
  var img = new Image();
  $j(img)
   .load(function () { 
     $j(this).hide();
     $j('#loader') 
      .removeClass('loading')
      .append(this);

  $j(this).fadeIn();
   })
 .error(function () {
   })
 .attr('src', '/2012/images/august/sailboat.gif');
});

以上代码运行良好。现在，对于“重播”或“重放”代码，它不起作用：

<a id="refresh" href="#"> Replay Animation </a>

JS

$j(function() {
  $j("#refresh").click(function() {
     $j("#loader").load("/2012/images/august/sailboat.gif")
  })
})

我知道JS有一些错误，但是由于我缺乏JS的技能，我不知道我应该做什么或尝试什么。任何帮助或建议都是非常感谢的！

谢谢!

Answer 1

检查一下这个：

$j("#refresh").click(function() {
  $j("#loader").find('img').attr("src", "/2012/images/august/sailboat.gif");
});

与前面的代码一样，您在#loader中追加了图像，因此，$('#loader').load(..)将无法工作。在#loader中找到图像，然后更改该图像的src。

Answer 2

如果需要，还可以附加时间戳以避免从缓存加载图像：

$j("#refresh").click(function() {
  var timestamp = new Date().getTime();
  $j('#loader').find('img').attr('src', '/2012/images/august/sailboat.gif'+'?'+timestamp);
});