負荷懸停PIC

Question

我有這個代碼

風格的div

#input{background:url(../image/main.png)} 
#input:hover {background:url(../image/hover.png)} 

HTML

<div id="input">input div </div> 
<div id="input">input div 2</div> 
<div id="input">input div 3</div> 
<div id="input">input div 4</div> 

當頁面加載main.png負荷和表演，但是當鼠標在DIV第一格黑和2或3秒hover.png表演後。我的背景圖片大小不是很大，但也許主機是非常薄弱無論如何加載兩個圖片第一次和懸停PIC顯示快？

Answer 1

您可以使用該精靈，然後設置你的背景background-position所以這一切的方式將第一次加載。

而關於精靈的最好的事情，它實際上使你的加載時間更快，因爲每個圖像需要對服務器單獨的請求，但如果你要求一個單一的文件對於大多數的網站，你可以增加加載時間大大。

這是一個很好的例子，它的外觀：

和代碼沃爾德是這樣的：

.mydiv:hover{ 
    background-position:-30px 0px; 
} 

Live example of how sprites works

有關background-positions如何實際工作進一步閱讀請看看這個：http://www.w3schools.com/cssref/pr_background-position.asp