点击即可重播GIF动画/重新加载GIF [英] Replay a GIF Animation/Reload GIF on Click

问题描述

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

I have a GIF animation that is large and I am having it display a loading icon until the GIF is loaded. Once it is loaded the GIF shows. Works great but I want to add a "replay" button to trigger the GIF to replay (reload).

加载代码和GIF代码：

Code for the loading and 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 ; 
}

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

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

The above code works fine. Now for the "Replay" or "Reload" Code that Does not Work:

HTML

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

JS

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

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

I know there is some error with the JS but with my lack of skill in JS I do not know what I should be doing or trying. Any help or advice is greatly appreciated!

谢谢！

推荐答案

选中此项：

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

与之前的代码一样，您将图像附加到 #loader 所以， $（'＃loader'）。load（..）将无效。在 #loader 中找到图像，然后更改该图像的 src 。

As in your previous code you're append the image within #loader so, $('#loader').load(..) will not work. Find the image within #loader and then change the src of that image.

这篇关于点击即可重播GIF动画/重新加载GIF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！