CSS背景預加載

我有一個懸停元素，當我將它鼠標懸停時，背景圖像會發生變化。這很好，但是當我將鼠標懸停在圖像上時，它會加載圖像，而不是之前，我會在短時間內看到空白框。我如何預加載圖像？CSS背景預加載

2013-03-24 ofer dofer

在你的身體開始，加載隱藏圖像：

<body> 
    <img src="myimage.png" style="display: none;" /> 
</body>

瀏覽器將使用它的緩存爲捕捉相同的圖像加載當你把它的背景下，這樣刻不容緩。

來源

2013-03-24 11:47:54

如果是background-image那麼你可以使用下列方法之一：

技術＃1

負載上元素的常規狀態下的圖像，只有移動它扔掉背景位置。然後移動背景位置以在懸停上顯示它。

#grass { background: url(images/grass.png) no-repeat -9999px -9999px; } 
#grass:hover { background-position: bottom left; }

技術＃2

如果有問題的元素已經有一個背景圖像應用，你需要改變這種形象，上面將無法工作。通常你會在這裏找到一個精靈（一個組合的背景圖像），然後移動背景位置。但如果這是不可能的，試試這個。將背景圖片應用於已經在使用的其他頁面元素，但沒有背景圖片。

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; } 
#grass:hover { background: url(images/grass.png) no-repeat; }

來源：

Duplicate Question answered by Fatih Hayrioğlu

CSS-Tricks

來源

2013-03-24 11:54:10 bukka

是不是，在這兩種情況下，圖像還只是瀏覽器中加載的媒體緩存？不錯，你如何展示這些方法，但是網頁共享同一個加載環境中的所有文件，因此無需使用偏移量將其設置在某處。在某些瀏覽器中，這些負偏移將無法正常工作，或者甚至將背景推回索引0，從而產生不需要的結果。 – 2013-03-24 12:05:28

CSS背景預加載

回答

相關問題