css - 预加载图片 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>

为什么 Firefox 不从缓存加载图像，而不是从服务器加载？

我该如何解决？

Answer 1

只要可能，不要使用两个图像。使用CSS Sprites技术。然后，您只需对background-position属性进行操作，而不是对不同的图像进行操作。

Answer 2

或者您可以尝试使用 jQuery preloadCssImages 函数，这将确保您的图像在显示之前加载到缓存中，从而使您的页面更加流畅；

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