IE6设置BackgroundImageCache背景图片缓存解决闪烁问题
提醒:本页面将不再更新、维护或者支持,文章、评论所叙述内容存在时效性,涉及技术细节或者软件使用方面不保证能够完全有效可操作,请谨慎参考!
今天在分析 拍拍网 页面时注意到下面这段脚本:
<!--[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都会带来效率上的问题,所以要避免使用。
html {
filter:expression(document.execCommand("BackgroundImageCache",false,true));
}
最后我把 拍拍网 上的那段代码结合网上的一些讲解改动如下:
<!--[if IE 6]>
<script type="text/javascript">
//<![CDATA[
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}
//]]>
</script>
<![endif]-->
END
不是这样的,在大量使用 CSS Spirite 做为小图标的场合,不开启背景图片缓存将会使系统使用大量内存来重绘这些图标。我的一个测试中:仅37KB(460x678)的gif背景图,载入100次时需要使用 > 400MB 的内存。
感谢提供实验数据:-) 以前感觉IE6蛮轻快的,现在感觉IE6笨重得如老黄牛一般,页面卡得要死(估计有这方面原因),当然也是前端的噩梦,总之消灭IE6人人有责,希望这段代码能够消失在历史的尘埃中...