HTML CSS Gif动画

Question

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

我有两个图像（“1个png”和“1个gif动画”）

我希望每当鼠标悬停在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元素

- LeSam

---

因为它被设置为仅播放一次，所以你可能想要做的是，在悬停在png上时将一些内容附加到“.gif”的末尾，例如“.gif？rnd=12334”，这将确保重新下载“ gif”并再次播放动画。 - Nick R

@NickR，你能给我一个例子吗？我已经编辑了我的帖子并放上了代码。 - LeSam

使用内联GIF可以实现即时动画，无需重新下载。 - Willem Mulder

Answer 1

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

因此，默认情况下，无法指定GIF应该何时播放或播放多长时间。

有三种解决方案：
1.您可以使用data:image替换img的src，以内联GIF。每当src更改时，GIF将再次播放。使用内联GIF而不是实际的URL，无需重新下载GIF，从而节省时间。请参见http://www.websiteoptimization.com/speed/tweak/inline-images/作为示例。
2.如评论和其他答案中所述，您可以将img标记的src替换为相同的GIF，但带有URL的附加项（例如?someRandomNumber=1345），以便重新下载GIF并再次播放它。缺点是GIF将被重新下载。
3.您可以使用类似http://slbkbs.org/jsgif/的东西通过AJAX下载GIF，然后使用canvas元素绘制它，并完全控制它...

- Willem Mulder

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格式，如果是，则更改扩展名并在结尾添加一个随机数。

你可以将其转换为函数并删除不需要的部分，这样每次悬停在png上时，它都会再次请求.gif图像，因为它的末尾会有一个不同的数字。

- Nick R

---

你应该使用 attr() 而不是 prop() 来处理 src。prop() 仅适用于布尔值。 - James Donnelly

谢谢您，我希望这个能够工作，我已将其设置为“已解决”，但现在无法尝试... 无论如何还是非常感谢您。 - LeSam

这种方法效率很低，因为每次播放GIF都需要重新下载。这会消耗带宽，并且在图像加载之前需要一定的时间，因此您的用户体验永远不是即时的。最好使用内联GIF，请参见我的其他答案。 - Willem Mulder

相关的是，他们使用了类似的解决方案 - https://dev59.com/FWsz5IYBdhLWcg3w6Mbn#7669524 和 http://jsfiddle.net/64fZa/5/。 - Nick R

Answer 3

循环是 GIF 图像本身的属性。最好的方法是修改 GIF，使动画可以无限循环播放。大多数接受 GIF 动画的图像编辑器都有一个“循环”选项，可以设置为 true。

否则，您可以通过 JavaScript 的 hacky 方法，在一定时间后重新加载图像或重新触发悬停（参见window.setInterval）。

- James Donnelly

---

在这种情况下，您需要使用JavaScript来检测mouseover事件并将元素的背景style设置为该图像，然后检测mouseout事件并将样式恢复为默认值。您是否正在使用jQuery？ - James Donnelly