浏览器是否会预加载隐藏的CSS背景图片？

Question

我听说它们可以缓存，但是一旦带有CSS背景图片的元素可见，图片似乎需要时间来加载，就像没有被缓存一样。

我应该预加载这些图片，还是采取其他措施来改善显示时的缓慢？

- Ben G

---

我认为他们不会这样做...至少在浏览器之间没有一致性。 - Ibu

Answer 1

我所使用的解决方案，现在普遍采用的是将精灵作为背景图像;

这样整个图像就被加载了，你只需要移动背景位置来查看不同的区域。

这里有一个教程，介绍如何使用它们。

还有一个小例子:

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

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

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

- Ibu