IE6设置BackgroundImageCache背景图片缓存解决闪烁问题

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

今天在分析拍拍网页面时注意到下面这段脚本:

1
2
3
4
5
6
7
<!--[if IE 6]>
<script type="text/javascript">
// <![CDATA[
  document.execCommand("BackgroundImageCache", false, true);
// ]]>
</script>
<![endif]-->

当看到这段脚本时觉得非常好奇,这对于IE6做了什么限制?通过搜索知道,IE6默认不缓存背景图片,CSS每次更改图片的位置时都会重新发起图片请求,这样对于视觉上有一定的闪烁,但是我过去的项目竟然感觉不到这样的问题,后来发现原来我一直用CSS Sprite解决这类加载问题的(貌似CSS Sprite也会造成这种情况,难道是本地测试看不出来?)。看来今天又学到了一招,搞前端的也真不容易,尤其是那个让人无语的Internet Explorer 6。

下面再贴出一种不推荐的办法,那就是CSS里写入expression,为什么不推荐,主要是因为效率问题,CSS expression都会带来效率上的问题,所以要避免使用。

1
2
3
html {
  filter:expression(document.execCommand("BackgroundImageCache",false,true));
}

最后我把拍拍网上的那段代码结合网上的一些讲解改动如下:

1
2
3
4
5
6
7
8
9
<!--[if IE 6]>
<script type="text/javascript">
//<![CDATA[
try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}
//]]>
</script>
<![endif]-->

END

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!

  1. 不是这样的,在大量使用 CSS Spirite 做为小图标的场合,不开启背景图片缓存将会使系统使用大量内存来重绘这些图标。我的一个测试中:仅37KB(460×678)的gif背景图,载入100次时需要使用 > 400MB 的内存。

    • 感谢提供实验数据:-)
      以前感觉IE6蛮轻快的,现在感觉IE6笨重得如老黄牛一般,页面卡得要死(估计有这方面原因),当然也是前端的噩梦,总之消灭IE6人人有责,希望这段代码能够消失在历史的尘埃中…

请稍后...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*