在頁面加載，CSS上加載圖像

Question

我最近問了一個關於使用Java Script將圖像用作按鈕的問題。 答案我得到了我的反對使用CSS而且工作正常。 但是我使用的圖像需要大約0.2秒才能加載。

在我使用此代碼之前，我讓我的頁面在開始時加載所有圖像，然后在某些鼠標事件下修改圖像的zIndex的JS腳本，但這會覆蓋href鏈接並且無法工作。

使用新代碼，所有函數都可以正常工作，因此每次頁面只加載第一個Image加載時，另外2個我在加載鼠標事件時在加載時使用此圖像。 這意味着在執行操作時按鈕會閃爍。 如何修改此代碼以在頁面加載的同時加載圖像？

代碼在這里： http ： //jsbin.com/casoy/12/edit？html，css，output

我以為我應該顯示舊代碼...： http ： //jsbin.com/casoy/13/edit？html，css，js，output

Answer 1

在觸發css樣式之前，不會發生下載圖像的調用。

有幾種方法可以做到這一點，並將html組織成你喜歡的，

- 這是一個粗略的例子，用你的代碼來展示原理。

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 ，引用的背景圖像已經有機會“預加載”到瀏覽器緩存。