预载图像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/