一个IE6下重复加载的BUG

分类:前端技术 | 网络转载 |  时间:2013-08-07

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

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.onloaddomready时进行类似操作

参考文档:

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


Copyright © 2013 ZHIZ.NET, INC. ALL RIGHTS RESERVED. TERMS OF SERVICE & PRIVACY POLICY. 1.3.5 蜀ICP备11006209号-2 TEL/18200120015 QQ:297055170