如何預加載圖像？

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";