在鼠标悬停时启动 GIF 并暂停？答案

【问题标题】：Start GIF On Mouse Hover and Pause Otherwise?在鼠标悬停时启动 GIF 并暂停？
【发布时间】：2012-01-21 09:25:30
【问题描述】：

所以我试图将这些图像放在我正在构建的页面的侧边栏上，这些图像是静态的，但是当您将鼠标悬停时，它们会以 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 甚至任何其他语言来做到这一点，这样我就不会得到这个随机的空白时刻？

【问题讨论】：

标签： javascript html css tumblr animated-gif

【解决方案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 还有一个可能影响您的问题，具体取决于动画...无论是否预加载了动画（悬停）图像，一旦加载，浏览器无论图像当前是否显示，都倾向于在后台播放图像。因此，从图像上移开并再次返回会导致动画“跳”到其当前位置，而不是从您移开图像时动画到达的位置继续。长动画比短动画更引人注目。

【讨论】：

如果 JS 不可用 - 你不能只使用 CSS 将它们文本缩进 -5000px 或将可见性设置为隐藏或类似的东西吗？它们仍会被加载到 DOM 中，因此当用户将鼠标悬停在静态图像上时仍会被预加载。
@Zac：这不是我在 my 答案中已经说过的吗？但是，您确实需要向 HTML 添加一些额外的元素（如果不使用 JavaScript），以便将 悬停的 图像分配给。
啊，是的。我刚刚重新阅读了您的答案，您是对的，这正是您所说的。我想我读错了。我的坏...
非常感谢。我会尝试这种方法，我担心只是从预加载的图像中创建鼠标悬停的悬停效果。但是，我突然想到，我可以通过将 img 属性设置为 diplay:none 并将 hover 属性设置为 display:block 然后为大小设置动画来做到这一点。不过，这行得通吗？可以将没有显示的东西悬停在上面吗？有机会我会在代码中尝试一下。
@Eddie: 'preloaded' 只是意味着浏览器已经缓存了图像，因此不需要向服务器发出另一个请求来获取它（这是延迟的来源）。没什么好怕的。 :) 为了实现您的目标，您不需要自己操作 IMG 元素 - 它们纯粹是为了缓存悬停的图像。在页面上放置了IMG 元素后，就没有什么可做的了。您的 CSS 将按原样工作，但应减少悬停延迟。

【解决方案2】：

您想学习的是如何预加载图像。在 Google 上搜索“HTML 预加载图像”会让您继续...

这个链接似乎有一个使用 javascript 的好主意。

http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm

【讨论】：

【解决方案3】：

您可以通过CSS 将DIV 添加到隐藏的页面 (display: none)，并在其中放置动画 gif 的IMG 标签。这将强制图像与页面一起预加载。

查看this link了解更多详情。

【讨论】：