加載圖像，CSS

Question

我最近詢問使用圖像作爲使用Java腳本按鈕的問題。我得到的答案是使用CSS來代替，並且工作正常。但是，我使用的圖像大約需要0.2秒才能加載。

在我使用此代碼之前，我的頁面在開始時加載了所有圖像，然後在某些鼠標事件下修改了圖像的zIndex，但是這覆蓋了href鏈接並失敗。

隨着新代碼的所有功能，工作等劑量上載荷在href但每次只有一個頁面加載的第一個圖像加載，其他2我使用此圖像下，當鼠標事件被觸發。這意味着執行操作時按鈕會閃爍。我如何修改此代碼以在頁面加載的同時加載圖像？

代碼在這裏：http://jsbin.com/casoy/12/edit?html,css,output

我想我應該顯示舊的代碼，因爲我們..：http://jsbin.com/casoy/13/edit?html,css,js,output

Answer 1

下載圖像，直到CSS樣式被觸發不會發生通話。

有幾個方法可以做到這一點，並組織HTML你喜歡什麼，

- here is a crude example using your code顯示的原則。

MARKUP

<div class="preload1"></div> 
<div class="preload2"></div> 

<a href="http://officialacescottie.co.uk/Home/Home.html">click me</a> 

* CSS *

a { 
    display: block; 
    width: 600px; 
    height: 114px; 
    background-image:url("/Buttons/Home.gif"); 
    text-indent: -9999px; 
    outline: 0; 
} 
a:hover, .preload1 { 
    background-image:url("/Buttons/HomeP.gif"); 
} 
a:active, .preload2 { 
    background-image:url("/Buttons/HomeC.gif"); 
} 
/* hide these off page in a way that 
    the browser will still call the background-image */ 
.preload2, .preload1 { 
    position:absolute; left:-9999px; top:-9999px; 
} 

/* image urls are shortened here only so it presents better on SO */ 

這顯示了基本原則，即，當a:hover被觸發時，所引用的背景圖像已經有有機會「預加載」到瀏覽器緩存。