我有一个很大的 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 ;
}
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
<a id="refresh" href="#"> Replay Animation </a>
JS
$j(function() {
$j("#refresh").click(function() {
$j("#loader").load("/2012/images/august/sailboat.gif")
})
})
我知道 JS 有一些错误,但由于我缺乏 JS 技能,我不知道我应该做什么或尝试什么。非常感谢任何帮助或建议!
Thanks!
检查一下:
$j("#refresh").click(function() {
$j("#loader").find('img').attr("src", "/2012/images/august/sailboat.gif");
});
正如在之前的代码中一样,您将在其中附加图像#loader
so, $('#loader').load(..)
不管用。找到里面的图片#loader
然后更改src
该图像的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)