使圖像被下載，即使沒有被顯示

他們我有一個html：使圖像被下載，即使沒有被顯示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title/> 
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/> 
    <style type="text/css"> 
    a.button { 
     background: url('button.png') repeat-x; 
    } 
    a.button:hover { 
     background: url('button_hover.png'); 
    } 
    </style> 
</head> 
<body> 
    <p><a class="button" href="#">Button</a></p> 
</body> 
</html>

圖像0當我將鼠標懸停按鈕只被下載。 I know that it is the default browser behaviour.
有沒有辦法強制下載圖片？如果是，如何？（我不想使用JavaScript，但如果沒有其他選擇，我可以使用）。

感謝和抱歉我的英語不好。

來源

2011-06-09 Artur Gaspar

執行a & a:hover狀態的標準方法是使用包含圖像兩種狀態的精靈。然後，而不是必須加載懸停狀態的圖像（這真的很醜），而是同時獲得兩個「圖像」。

a.button { 
    background: url('button.png') repeat-x; 
    background-position: 0px 0px; 
} 
a.button:hover { 
    background: url('button.png') repeat-x; 
    background-position: 0px YYpx; /* X, Y offsets */ 

}

如果合併後的背景圖像現在看起來是這樣的：

------------------- 
| active state | 
------------------- 
| hover state | 
-------------------

來源

2011-06-09 02:47:30 KyleWpppd

這可以通過預加載，圖像使用JavaScript來實現：

<script language = "JavaScript"> 
function preloader() {heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg";} 
</script> 
</head><body onLoad="javascript:preloader()"> 
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'"><img name="img01"src="justanotherfile.jpg"></a>

Here是它

來源

2011-06-09 02:41:29 eepzable

的文章在這裏最好的解決方案是使用CSS Sprites。

您的按鈕的兩種狀態都將在一個圖像中，因此您的:hover圖像將自動下載。

且不說其他重大利益，你會得到，提高頁面加載速度得益於如只需要下載整個菜單一個圖像，而不是每個按鈕的兩個圖像。

來源

2011-06-09 02:41:58 thirtydot

使圖像被下載，即使沒有被顯示

回答

相關問題