点击即可重播GIF动画/重新加载GIF

我有一个很大的GIF动画，我正在显示加载图标，直到加载GIF。 加载后，GIF会显示。 效果很好，但我想添加一个“重播”按钮来触发GIF重播（重新加载）。

加载代码和GIF：

HTML

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

上面的代码工作正常。 现在为“重播”或“重新加载”代码不起作用：

HTML

  Replay Animation  

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