Javascript 重放GIF动画/单击后重新加载GIF
我有一个大的GIF动画,我让它显示一个加载图标,直到GIF加载。一旦加载,GIF就会显示出来。工作得很好,但我想添加一个“重播”按钮,以触发GIF重播(重新加载) 加载和GIF的代码: HTMLJavascript 重放GIF动画/单击后重新加载GIF,javascript,jquery,Javascript,Jquery,我有一个大的GIF动画,我让它显示一个加载图标,直到GIF加载。一旦加载,GIF就会显示出来。工作得很好,但我想添加一个“重播”按钮,以触发GIF重播(重新加载) 加载和GIF的代码: HTML <div id="loader" class="loading img-center"></div> JS #loader { width: 600px; height: 450px; margin: auto; } #loader.loading { backg
<div id="loader" class="loading img-center"></div>
JS
#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技能,我不知道我应该做什么或尝试什么。非常感谢您的任何帮助或建议
谢谢 检查以下内容:
$j("#refresh").click(function() {
$j("#loader").find('img').attr("src", "/2012/images/august/sailboat.gif");
});
与前面的代码一样,您将图像附加到
#loader
中,因此,$('#loader').load(…)
将不起作用。在#loader
中查找图像,然后更改该图像的src
。如果需要,还可以附加时间戳以避免从缓存加载图像:
$j("#refresh").click(function() {
var timestamp = new Date().getTime();
$j('#loader').find('img').attr('src', '/2012/images/august/sailboat.gif'+'?'+timestamp);
});
与其经历所有这些麻烦,为什么不直接编辑实际的gif图像来重复它自己呢。@elclanrs-因为gif中有文本,我希望用户可以控制何时重播。明白了我把代码放在
中,并且必须把它放在HTML下面的
中。避免缓存会使加载指示器毫无意义。它只需要重新下载一遍