如何預加載css：懸停背景圖片

我製作了一個Wordpress網站，其中一些按鈕有一個背景圖片，圖片在懸停時發生變化。這是通過簡單的CSS完成的。當用戶第一次進入頁面並懸停在一個按鈕上時，該空間將變爲空白，直到加載新圖像。如何預加載css：懸停背景圖片

什麼是加載所有圖像的最佳方式，因此它有一個平滑的過渡。

PS有每頁

來源

2014-03-04 Jordan

這些圖像的像素尺寸是多少？它們是否縮小了比例，但保留了高像素大小？ – kylecblyth

他們是130px x 39px。它們是原始高度，而不是縮小尺寸 – Jordan

這很奇怪，小圖片應該幾乎立即加載：o – kylecblyth

您可以使用您的按鈕，「雪碧」的圖像。因此，所有按鈕，正常bg和懸停bg將保留在圖像中。並且該圖像最初將在按鈕正常狀態下加載。懸停，你必須使用相同的精靈圖像，但在CSS中不同的背景位置。

來源

2014-03-04 03:53:28 Iqbal

只有最多2個按鍵製作一個div包含所有你想有顯示當用戶將鼠標懸停在按鈕上並把它放在你的HTML的任何地方的圖像預載的ID （沒關係哪裏）例如：

<div id="preload"> 
    <img src="path/image-01.png" width="1" height="1" alt="Image 01" /> 
    <img src="path/image-02.png" width="1" height="1" alt="Image 02" /> 
    <img src="path/image-03.png" width="1" height="1" alt="Image 03" /> 
</div>

然後在你的CSS，添加：

#preload {display: none}

這將隱藏您的圖片，但他們會加載。只要確保按鈕使用與預加載div相同的路徑，否則您將加載圖像兩次。

完全教程這裏：

來源

2014-03-04 02:23:48 kylecblyth

如何預加載css：懸停背景圖片

回答

相關問題