单击时重放 GIF 动画/重新加载 GIF答案

【问题标题】：Replay a GIF Animation/Reload GIF on Click单击时重放 GIF 动画/重新加载 GIF
【发布时间】：2012-08-07 05:13:59
【问题描述】：

我有一个很大的 GIF 动画，我让它在加载 GIF 之前显示一个加载图标。一旦加载，GIF 就会显示。效果很好，但我想添加一个“重播”按钮来触发 GIF 重播（重新加载）。

加载和 GIF 代码：

HTML

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

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

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

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

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

谢谢！

【问题讨论】：

与其经历所有这些麻烦，不如直接编辑实际的 gif 图像以重复自身。
@elclanrs - 因为 GIF 中有文本，我希望用户可以控制何时重播。

标签： javascript jquery

【解决方案1】：

检查一下：

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

与您之前的代码一样，您将图像附加到#loader 中，因此$('#loader').load(..) 将不起作用。在#loader 中找到图片，然后更改该图片的src。

【讨论】：

知道了！ - 我在<head> 中有代码，必须将其放在 HTML 下方的<body> 中。

【解决方案2】：

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

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

【讨论】：

避免缓存会使加载指示器变得毫无意义。它只需要重新下载一遍