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 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
JS实现音量控制拖动
Jan 15 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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 文件上传系统手记
2009/10/26 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
Node.js实现数据推送
2016/04/14 Javascript
基于node实现websocket协议
2016/04/25 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
移动端界面的适配
2017/01/11 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中字符串类型json操作的注意事项
2017/05/02 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
python实现批量文件重命名
2019/10/31 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
numpy库reshape用法详解
2020/04/19 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
珍惜资源保护环境的建议书
2014/05/14 职场文书
2014年师德承诺书
2014/05/23 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
确保工程质量承诺书
2015/04/29 职场文书
美元符号 $
2022/02/17 杂记