IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

一个IE6下重复加载的BUG

Taobao.com UED Team 2010-05-20 13:25:14 累计浏览 3,985 次
本机暂存

原图已失效

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

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/

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,350)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,849)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
  8. 什么是全栈工程师? (累计阅读 14,038)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,735)
  10. 7 天打造前端性能监控系统 (累计阅读 11,187)