IE 缓存策略的BUG的解决方法


Posted in Javascript onJuly 21, 2007

今天是发现bug的高产期。

IE在解析innerHTML的时候居然会忽略Cache策略,简单的重复加载图片。请看以下代码:

<HTML>
<HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var st="<img src=\"http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif\">"
var ar = new Array(101);
window.onload=function(){
    document.body.innerHTML = ar.join(st);
}
//-->
</SCRIPT>
</BODY>
</HTML>

保存到本地作为一个htm文件,然后用IE打开(允许脚本运行),然后用http监视工具可以看到,IE发起了100个请求,一个都不cache!

在FireFox下面就没有问题,只发起一个请求。

用这段代码可以解决这个问题  <html>  
<head>  
<script language=javaScript>  
var imageholder=new Image()  
imageholder.src="http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif"  
</script>  
</head>  
<body>  
<div id="div1"></div>  
<script language=javaScript>  
document.getElementById("div1").innerHTML =  
"<img id='p1'><img id='p2'><img id='p3'>";  
document.getElementById("p1").src=imageholder.src;  
document.getElementById("p2").src=imageholder.src;  
document.getElementById("p3").src=imageholder.src;  
</script>  
</body>  
</html> 

这个bug的官方描述见:  http://support.microsoft.com/default.aspx?scid=kb;en-us;319546  
此外 http://www.bazon.net/mishoo/Articles/msie/958/ 指出background-image会带来一样的问题。  
ms的官方解决方案是象这样:  
<HTML>  
<HEAD>  
<BODY>  
<SCRIPT LANGUAGE="JavaScript">  
<!--  
var st="<img src=\"http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif">http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif\">"  
var ar = new Array(101);  
function test(){  
document.getElementById("d").innerHTML = ar.join(st);  
document.getElementById("d").style.display="block";  
}  
setTimeout("test()",1000);  
//-->  
</SCRIPT>  
<div id="d"><img src="http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif">http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif"></div>  
</BODY>  
</HTML>  
如果不怕麻烦的话,这样做可以更快一点点,也更保险:  
<HTML>  
<HEAD>  
<BODY>  
<SCRIPT LANGUAGE="JavaScript">  
<!--  
var st="<img src=\"http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif">http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif\">"  
var ar = new Array(101);  
function test(){  
document.getElementById("d").innerHTML = ar.join(st);  
document.getElementById("d").style.display="block";  
}  
//-->  
</SCRIPT>  
<div id="d"><img src="http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif">http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif" onreadystatechange="if(readyState=='complete')setTimeout('test()',0)"></div>  
</BODY>  
</HTML> 

更多方法:
http://www.blogjava.net/emu/archive/2006/03/01/33082.html
Javascript 相关文章推荐
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
用JS实现的一个include函数
Jul 21 #Javascript
代码精简的可以实现元素圆角的js函数
Jul 21 #Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 #Javascript
用javascript实现读取txt文档的脚本
Jul 20 #Javascript
符合W3C网页标准的iframe标签的使用方法
Jul 19 #Javascript
javascript实现unicode和字符的互相转换
Jul 18 #Javascript
js实现的网页颜色代码表全集
Jul 17 #Javascript
You might like
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
浅析python连接数据库的重要事项
2021/02/22 Python
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
酒店中秋节促销方案
2014/01/30 职场文书
四年级科学教学反思
2014/02/10 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
颐和园导游词
2015/01/30 职场文书
红色经典电影观后感
2015/06/18 职场文书
爱国主义电影观后感
2015/06/18 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js