当鼠标悬停时启动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时变空白的短暂时刻。虽然这不是一个很大的问题，但看起来非常不专业。

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

所以我的问题是：有没有更好的方法用CSS或其他任何语言来做到这一点，以便我不会得到这个随机的空白时刻？

- Eddie Rivas

Answer 1

您可以将图片放置在页面其他位置的IMG元素中，并将它们放置在隐藏容器中（CSS中使用 display:none 或 visibility:hidden ），这样当页面首次加载时，它们将被加载但不可见。这应该可以在客户端缓存悬停图像，以便在浏览器请求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，还存在另一个问题，这可能会影响到你的使用，取决于该动画的情况...无论动画（悬停）图像是否已预加载，一旦加载完成，浏览器往往会在后台播放该图像，而不管它当前是否被显示。因此，移开图像再次移到上面时，动画会“跳”到其当前位置，而不是从你移开图像时的位置继续播放。对于长时间的动画来说，更加明显。

- MrWhite

---

啊，是的。我刚刚重新阅读了你的回答，你说得对，就是你所说的。我想我可能看错了。我的错... - Zac Seth

非常感谢。我会尝试这种方法，我的担心只是在鼠标悬停时从预加载的图像创建悬停效果。然而，我想到了一个办法，可以通过设置img属性为diplay:none和hover属性为display:block，然后动画化大小来实现。不过这样行得通吗？display none的东西能被悬停吗？我有机会时会在代码中尝试一下。 - Eddie Rivas

@Eddie：“预加载”只是指浏览器已经缓存了图像，因此不需要向服务器发出另一个请求来获取它（这就是延迟的来源）。没有什么可担心的。 :)为了实现您的目标，您无需操纵IMG元素本身-它们纯粹用于缓存悬停图像。将IMG元素放置在页面上后，无需进行其他操作。您的CSS将按原样工作，但将减少悬停延迟。 - MrWhite

是的，我明白你在说什么。虽然跳跃动画可能不会真正成为问题。我的问题是，就像你说的那样，我需要使用这些img标签，而我最初并没有使用它们，我使用了一个更改background-image css属性的li子类。我不使用img标签的原因是我一直遇到它没有按照我的意愿进行操作的问题。我很喜欢你添加了一个示例，我会继续尝试看看是否能够最终解决它。感谢您的耐心和帮助:D - Eddie Rivas

@EddieRivas：我认为你可能只是想得太多了，因为实际上要做的事情很少。:) img标签本身虽然最初需要缓存动画图像，但在鼠标悬停效果中根本不使用。你的CSS :hover已经完成了这个工作。就像你所说的，只有第一次悬停会出现问题，因为在第一次悬停后，图像已经被缓存在浏览器中了。页面上的img标签实际上为您完成了这个第一次悬停-它缓存了动画图像。 - MrWhite

Answer 2

你想学习的是如何预加载图片。在Google上搜索“HTML预加载图片”即可开始...

这个链接似乎有一个使用JavaScript的好主意。 http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm

- musefan

Answer 3

你可以在页面中添加一个被隐藏的 DIV 元素（通过 CSS 的 display: none 属性），并在其中放置动画 GIF 的 IMG 标签。这样可以强制图片随页面一起预加载。

更多详情请查看 此链接。

- Michael Minton