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

163 阅读 0 评论 108 点赞

我是靠谱客的博主认真纸飞机，最近开发中收集的这篇文章主要介绍IE 缓存策略的BUG的解决方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天是发现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> 