预加载图像 CSS
我在 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 不从缓存加载图像，而不是从服务器加载图像？
我该如何修复它？
I have problem with a preloaded image on Firefox. On (webkit) Chrome/Safari it looks fine.
Let's take a look.
I have :hover load image
the css file:
.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;}
and HTML
<div class="zz"></div>
<li id="ofirmie" ></li>
Why doesn't Firefox load the image from the cache, rather than from server?
How can I fix it?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
只要可能就不要使用两个图像。使用 CSS 精灵技术。然后您只需操作
background-position属性而不是不同的图像。As long as it's possible don't use two images. Use CSS Sprites technique. Then you just operate on
background-positionproperty instead of different images.或者您可以尝试使用 jQuery preloadCssImages 函数，这将确保您的图像在显示之前加载到缓存中，从而使您的页面更加流畅；
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
Or you can try using the jQuery preloadCssImages function, this will make sure your images are loaded into the cache before displaying and thus making your page much smoother;
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/