重新启动动画GIF作为背景图像
重新启动动画GIF作为背景图像
提问于 2011-09-27 20:08:34
可以重新启动用作background-image的动画GIF吗？
考虑一下这个HTML：
<div id="face">
<div id="eyes"></eyes>
</div>还有这个风格：
#eyes.blink {
background-image:url('blink.gif');
}我希望每次将类blink添加到#eyes时都会播放blink.gif动画，而不仅仅是第一次。
我原以为这能行得通：
function startBlink() {
$('#eyes').addClass('blink');
}
function stopBlink() {
$('#eyes').removeClass('blink');
}问题是，火狐和WebKit浏览器在播放过一次背景图像GIF动画后，都不会再播放一次。添加/删除类闪烁只在第一次起作用。
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-10-06 09:32:25
您可以通过重新加载动画gif来重放它。这对于带宽来说并不理想，特别是当图像很大时，但它会强制重新启动动画。
在我的示例中，我添加和删除了<div id="animated">的onclick
$('#animated').click(function() {
/* Reference to the clicked element and toggle the .go class */
var $div = $(this);
$div.toggleClass('go');
/* Start the animated gif */
if ($div.hasClass('go')) {
/* Create an <img> element and give it the animated gif as a src. To
force a reload we add a date parameter to the URL */
var img = document.createElement('img');
img.src = "http://yoursite.com/animated.gif?p" + new Date().getTime();
/* Once the image has loaded, set it as the background-image */
$(img).load(function(){
$div.css({backgroundImage: "url("+img.src+")"});
});
/* Remove the background-image */
} else {
$div.css({backgroundImage: "none"});
}
})Demo of it正在运行。
Stack Overflow用户
发布于 2013-08-07 23:06:16
我发现你还可以在图片src的末尾添加一个?+Math.random()，它会重新加载.gif。
Stack Overflow用户
发布于 2011-09-27 20:16:22
您是否考虑过使用两次名为blink.gif和blink2.gif的相同图像，为它们添加两个类并在类之间切换？
<div id="face">
<div id="eyes"></eyes>
</div>
.blink {
background-image:url('blink.gif');
}
.blink2 {
background-image:url('blink2.gif');
}
function MakeBlink()
{
if ($('#eyes').hasClass('blink'))
{
$('#eyes').removeClass('blink').addClass('blink2');
} else
{
$('#eyes').removeClass('blink2').addClass('blink');
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7568855
复制相关文章
相似问题