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

时间：2022-05-22 08:20:44|栏目：JavaScript代码|点击：次

今天是发现bug的高产期。

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

<HTML>
<HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</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代码

下一篇：js Function类型

本文标题：IE 缓存策略的BUG的解决方法

本文地址：http://www.codeinn.net/misctech/202538.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程