如何改善我的圖標圖像的加載時間和佈局？

Question

我的網站上有這樣的代碼：

<ul> 
<li><a class='disabled' ><img src='../../Content/Icons/home.png' />Home</a></li> 
<li><a href='xx' title='xx'><img src='../../Content/Icons/xx.png' />xx</a></li> 
<li><a href='yy' title='yy'><img src='../../Content/Icons/yy.png' />yy</a></li> 
</ul> 

有兩個問題。

1）我想將我的圖像合併爲一個包含多個圖像的較大圖像文件。我想過使用背景，但我坐在具有漸變背景的DIV上，所以我不認爲我不確定它是否可能。請注意，我的圖標具有透明背景。 2）當頁面顯示時，圖像加載時會有延遲。在他們裝載它們之後，我的DIV稍稍移位。

有沒有人有任何想法，我可以在這裏做什麼。我需要的是圖標定位是正確的。現在它看起來像這樣：

xxxxxxxxxxxxxxxxx 
x    x 
x Icon  Home x 
x    x 
xxxxxxxxxxxxxxxxx 

希望有人可以幫助建議/提示。

Answer 1

對於第一個問題，我不確定你的意思是將它們組合成一個文件與多個圖像。您可以將它們組合成單個圖像文件，或者它們可以是單獨的圖像，就像現在一樣。我不確定在單個文件中讓他們獲得什麼好處。現代的瀏覽器非常聰明，你不會因爲這樣做而減少幾毫秒的時間。

第二個問題是瀏覽器錯誤地猜測第一次渲染時的圖像大小。查看W3C's documentation的img標籤。說，你的圖像是25px乘25px。您可以執行如下操作：

<img src='../../Content/Icons/xx.png' width="25" height="25" /> 

這樣瀏覽器就會提前知道圖像在可用時將佔用的空間。