javascript 单击时重播 GIF 动画/重新加载 GIF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11839634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replay a GIF Animation/Reload GIF on Click
提问by L84
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 动画，我让它显示一个加载图标，直到 GIF 被加载。加载后，GIF 显示。效果很好，但我想添加一个“重播”按钮来触发 GIF 重播（重新加载）。
Code for the loading and GIF:
加载和 GIF 代码：
HTML
HTML
<div id="loader" class="loading img-center"></div>
CSS
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
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
HTML
<a id="refresh" href="#"> Replay Animation </a>
JS
JS
$j(function() {
$j("#refresh").click(function() {
$j("#loader").load("/2012/images/august/sailboat.gif")
})
})
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!
我知道 JS 存在一些错误，但由于我缺乏 JS 技能，我不知道我应该做什么或尝试什么。非常感谢任何帮助或建议！
Thanks!
谢谢！
回答by thecodeparadox
Check this:
检查这个：
$j("#refresh").click(function() {
$j("#loader").find('img').attr("src", "/2012/images/august/sailboat.gif");
});
As in your previous code you're append the image within #loaderso, $('#loader').load(..)will not work. Find the image within #loaderand then change the srcof that image.
就像在您之前的代码中一样，您将图像附加到其中#loader，$('#loader').load(..)将不起作用。找到其中的图像#loader，然后更改该src图像的 。
回答by Sudhir Bastakoti
You could also append timestamp to avoid image loading from cache if needed:
如果需要，您还可以附加时间戳以避免从缓存加载图像：
$j("#refresh").click(function() {
var timestamp = new Date().getTime();
$j('#loader').find('img').attr('src', '/2012/images/august/sailboat.gif'+'?'+timestamp);
});
