浏览器预加载隐藏的CSS背景图像吗？

Question

我被告知他们这样做，但是一旦具有CSS背景图像的元素变得可见，图像似乎需要花费时间来加载，就像它没有被缓存一样。

我应该预先加载这些，还是做些其他事情来改善它们出现时的缓慢程度？

Answer 1

我使用的解决方案，现在常用的是使用精灵作为背景图像;

通过这种方式加载整个图像，您需要做的就是移动背景位置以查看不同的区域

以下是关于如何使用它们的Tutorial。

还有一个例子：

ul li {
   width: 50px;
   height: 20px;
   background: url(sprite.png) no-repeat 0px 0px;
}

ul li:hover {
   background-position: 0px -20px;
}

在这个例子中，列表项将有一个背景图像，例如一个按钮，当你将鼠标悬停在它上面时，背景会向上移动20px以显示不同的版本。