CSS：悬停状态图像缓存 [英] CSS: Hover State images cache

问题描述

当我们定义任何CSS的悬停状态...&在悬停状态下，我们更改 background：url（'image path'）; 将此图片预加载将在元素的第一个悬停下载。如果这是所以如何预加载它...我知道javascript预载图像..是要工作...

when we define hover state of anything CSS... & on hover state we change the background:url('image path'); will this image be preloaded of will be download on the first hover of the element.. if that is so then how to preload it... i know the javascript to preload images.. is that going to work...

推荐答案

如果你想避免你的悬停状态图片只加载他们被悬停在上面，而不是预加载它们，为什么不创建保持正常和悬停图像的精灵？这样，您可以确保所有悬停状态图片都已加载，同时降低所有请求的开销。你唯一需要做的是设置 background-position 属性的值。

If you're trying to avoid having your hover state images only load they they're being hovered on, instead of preloading them, why not create sprites that hold both the normal and hover images ? That way you can be sure that all your hover state images will already be loaded, and at the same time drop the overhead for all the requests. The only thing that you would then need to do, is to set the value of the background-position attribute.

至于你的第一个问题，我认为找到答案的最好方法是使用两个大图像（一对壁纸会工作），并自己测试，虽然我怀疑图像将只有当鼠标结束时加载

As for your first question, I suppose the best way of finding the answer is to use two large images (a couple of wallpapers would work) and test it yourself, although I suspect that the images will only be loaded when the mouse is over the original image, because that's when the code is being executed.

希望这有助于！

这篇关于CSS：悬停状态图像缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！