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/

预加载图片CSS

2 个答案: