預載圖像CSS

Question

我在Firefox上預加載的圖像有問題。在（webkit）Chrome/Safari上看起來很好。

讓我們來看看。

我:hover負荷圖像 CSS文件：

.zz{background:url(../img/guzik_01_ofirmie_PL_A.png) no-repeat; height: 1px; width: 1px; position:absolute; } 

li#ofirmie{background:url(../img/guzik_01_ofirmie_PL_B.png) no-repeat; height: 44px; width: 108px; position: absolute; z-index: 1000;} 

ul.menu li#ofirmie:hover {background:url(../img/guzik_01_ofirmie_PL_A.png) no-repeat; height: 44px; width: 108px; position:absolute;} 

和HTML

<div class="zz"></div> 

<li id="ofirmie" ></li> 

爲什麼不火狐從緩存加載圖像，而不是從服務器？

我該如何解決？

Answer 1

只要有可能不要使用兩個圖像。使用CSS Sprites技術。然後，您只需操作background-position屬性而不是不同的圖像。

Answer 2

或者您可以嘗試使用jQuery preloadCssImages函數，這將確保您的圖像在顯示之前加載到緩存中，從而使您的頁面更平滑;

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/