加載CSS背景圖片時的延遲

Question

我的網站有一些標籤，點擊它們後背景圖片會發生變化。

但是，當我在DOM加載後第一次將鼠標懸停在標籤上時，在懸停圖像顯示之前會有一些延遲，從而產生刺耳的效果。

我不知道如何解決這個問題，有什麼想法？ :)

現場示例：http://jsfiddle.net/timkl/fjupq/ - JSFiddle服務器上的延遲時間不長 - 但仍然存在。

Answer 1

解決方案是使用精靈而不是單獨的圖像。

• http://css-tricks.com/css-sprites/

您可以使用一個單一的形象和的，而不是改變上:hover其背景出處，只需改變背景的位置。這樣，整個圖像被預先加載。

例如，檢查堆棧溢出的精靈表：

• http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4

你不必把它帶到這個極端的，你可以有一個既具有正常的圖像和:hover狀態，並將其移動到左/右或上/下。

Answer 2

一個簡單的解決方案是使用JavaScript來預加載圖像。將其包含在頁面的HEAD中：

<script type="text/javascript"> 
    var img = new Image(); 
    img.src = "http://dummyimage.com/200x10/000000/fff"; // background image 
</script>