如何预加载图像？

Question

我使用的是CSS background {....}

这需要时间来了，所以我想这个预加载图像background鼠标时加载首次设立的鼠标悬停大背景图像。

什么是最好的选择做到这一点，使用纯CSS或JavaScript或jQuery的？

请不要建议我CSS雪碧。

Answer 1

如果是悬停效果，请使用css sprites并忘记javascript。更简单，更少的http请求。

Answer 2

您可以看看CSS sprites技术，这可能会大大减少您的图像大小。顺便说一句，它将有助于预加载全部悬停，或者动态更改装饰图像，这些图像在页面加载时已加载。

Answer 3

或者不要预先加载它。

让图像包含图像的两种状态，然后使用CSS重新定位图像以显示您所需的状态。

如果您有多张图片，则可能需要执行其他人提到的精灵。

另一个链接：http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Answer 4

如果图像总是相同的，下面将做：

pic1= new Image(100,25); 
pic1.src="http://someplace.com/image1.gif";