html css Gif动画

Question

我有一个.gif播放动画一次。它不会循环，我不想让它循环。

我有两张图片，(“1png”和“1gif animated")

我希望每次鼠标经过png图像时，gif都会播放。

我的问题是，当我将鼠标位置设置在png图像上时，gif播放一次并停止。当我将鼠标移走，然后将其移回图像上时，它不再播放。

我的CSS代码：

#icon{
 float: left;
 width:50px;
 height:50px;
 background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent;
}
#icon:hover{
float: left;
width:50px;
height:50px;
background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent;
}

#icon是一种DIV

Answer 1

默认情况下，您无法控制GIF的循环或动画。浏览器将按原样播放GIF。

因此，在默认情况下，不可能说出GIF应该播放什么或者播放多长时间。

有三种解决方案：

你用一个data:image替换了img的src，这样你就内联了。每当src发生变化时，GIF都会再次播放。使用内联GIF而不是真正的URL，无需重新下载GIF，因此节省了时间。参见http://www.websiteoptimization.com/speed/tweak/inline-images/获取示例

1. ，如在评论和其他答案中所说，您可以将img标签的src替换为相同的GIF，但使用URL的附录(如?someRandomNumber=1345)，这样它将重新下载GIF并再次播放。缺点是，GIF将是redownloaded.
2. You使用像http://slbkbs.org/jsgif/这样的东西通过AJAX下载GIF，然后使用画布元素绘制它，并拥有对它的完全控制...

Answer 2

您需要将图像从CSS中提取出来，然后使用img src=

但您可以修改以下内容：

// hack for not caching .gifs in ff/chrome etc.
$("img").each( function( ) {
    var src = $(this).attr("src");
    if( /\.gif$/i.test(src)) {
        $(this).attr( "src", src.replace( /\.gif$/, ".gif?rnd=" + Math.floor(Math.random() * 100) + 1));
    }
});

这样做的目的是

• 遍历页面上的所有图像
• 检查它是否是.gif更改
• 扩展名以在en上添加随机数。

您可以将其转换为一个函数，并去掉不需要的部分，这样每次您将鼠标悬停在png上时，它就会再次请求.gif图像，因为它的末尾会附加一个不同的数字。

Answer 3

循环是GIF本身的属性。要做到这一点，最好的方法是修改GIF以允许动画无休止地循环。大多数接受GIF动画的图像编辑器都有一个可以设置为true的"Loop“选项。

否则，您可以使用JavaScript以一种老套的方式完成此操作，方法是重新加载图像或在特定时间范围后重新触发悬停(请参阅window.setInterval)。