javascript - 在鼠标悬停时启动 GIF，否则暂停？

Question

因此，我试图将这些图像放在我正在构建的静态页面的侧边栏上，但是当您将鼠标悬停在上面时，它们会以 gif 动画形式呈现。我当前的设置是让 background-image css 属性图像通常是静态 jpg，但在鼠标悬停时更改为动画 gif。这是代码，可以更好地说明我的观点。

CSS:

#segments li a.fnb {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/fnb%21-small.jpg); /*fallback*/
}

#segments li a.whhu {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/still.jpg);
}

#segments li a.fnb:hover {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif);
}

#segments li a.whhu:hover {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif);
}

其他的我就不多说了，我的观点没有必要。

HTML:

<ul id="segments">
    <li><a href="http://collabprojekt.com/tagged/fnb!" class="fnb"></a></li>
    <li><a href="http://collabprojekt.com/tagged/whhu" class="whhu"></a></li>
</ul>

站点是http://tcptest.tumblr.com ，请查看带有图像的左侧栏以了解其当前的工作方式。

这行得通，但我唯一的问题是，对于有史以来的第一次悬停，它必须加载 gif，这会导致在加载 gif 时框变为空白的一小段时间。虽然这不是什么大不了的事，但看起来真的很不专业。

我尝试了这个使用 JS 的想法 ( link )，但它失败了。

所以我想我的问题是:是否有更好的方法使用 CSS 或什至任何其他语言来执行此操作，这样我就不会得到这个随机的空白时刻？

Answer 1

您可以将图像包含在页面其他位置的 IMG 元素中，并将它们放在隐藏的容器中(display:none 或 visibility:hidden 在 CSS 中)所以它们在页面首次加载时加载，但不可见。这应该用于缓存悬停图像客户端，这样当浏览器请求 CSS 中引用的 :hover 图像时，您就不会得到延迟。

我倾向于在 IMG SRC 属性中使用与您在 CSS 中使用的相同的文件路径，以确保浏览器将其视为相同的图像。

那是如果 JavaScript 解决方案不适合您。

从你上面的例子...

<!-- Cache Images -->
<div style="display:none">
<img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif" alt="">
<img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif" alt="">
</div>

编辑:

动画 GIF 有一个额外的问题，可能会影响您，具体取决于动画...无论动画(悬停)图像是否预加载，一旦加载，浏览器倾向于在后台播放图像，而不管它当前是否显示。因此，离开图像并再次返回会导致动画“跳”到其当前位置，而不是从离开图像时动画到达的位置继续。长动画比短动画更引人注目。