代码改变世界

【IE6】一个IE6下重复加载的BUG

2012-07-04 10:36  sniper007  阅读(205)  评论(1)  编辑  收藏  举报

…

上周接到一个需求，有人反馈淘宝的搜索结果页会对某些资源文件进行重复不停地重新载入，问题严重。经过一系列排查，最终发现问题所在：

IE6在window.onload(或模拟的domready)时执行脚本，会引发一些cache的问题:

  • 问题1. 此时JS对dom进行渲染级的变动，如设置宽高、innerHTML等，会对元素的背景图进行重新请求
  • 问题2. 此时JS对多个Image元素设置同一src，此src会被请求多次

…

先来看下搜索结果页fix前后的对比：


…

Tests：(加fix参数查看fix后效果，看完fix版再看未fix版需重启浏览器)

问题1 Test：背景图会被重复载入
http://www.chencheng.org/test/srp-bug/css-sprites-test.php

问题2 Test：占位图会被载入三次
http://www.chencheng.org/test/srp-bug/img-src-test.php

…

解决方案：

问题1. 在页头CSS加入如下代码

html {
zoom: expression(function(ele){
    ele.style.zoom = "1";
    document.execCommand("BackgroundImageCache", false, true);
}(this));
}

问题2. 没找到什么好方法，暂时只能避免，即：不在window.onload或domready时进行类似操作

…

参考文档：

http://ajaxian.com/archives/no-more-ie6-background-flicker
http://www.fivesevensix.com/studies/ie6flicker/
http://blog.sina.com.cn/s/blog_49e464d80100fm9h.html

…

完