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元素中，并将它们放在隐藏容器中（CSS中为display:none或visibility:hidden），以便在页面首次加载时加载它们加载，但不可见。这应该用于缓存悬停的图像客户端，这样当浏览器请求CSS中引用的：悬停图像时，您就不会得到延迟。

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

如果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还有一个问题，具体取决于动画......无论动画（悬停）图像是否已预加载，一旦加载，浏览器无论当前是否显示图像，都倾向于在后台播放图像。因此，移动图像并再次返回图像会导致动画“跳转”到当前位置，而不是从动画移动到图像时继续移动。使用长动画而不是短动画会更加明显。

Answer 2

您想要学习的是如何预加载图像。谷歌搜索“HTML预载图像”将帮助你...

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

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

Answer 3

您可以通过DIV向隐藏（display: none）的网页添加CSS，并在其中添加动态GIF的IMG标记。这将强制图像预先加载页面。

查看this link了解详情。

开始GIF鼠标悬停和暂停否则？

3 个答案: