快捷導(dǎo)航

IE 緩存策略的BUG的解決方法

更新時間：2007年07月21日 00:00:00 作者：

今天是發(fā)現(xiàn)bug的高產(chǎn)期。

IE在解析innerHTML的時候居然會忽略Cache策略，簡單的重復(fù)加載圖片。請看以下代碼：

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

</SCRIPT>
</BODY>
</HTML>

保存到本地作為一個htm文件，然后用IE打開（允許腳本運行），然后用http監(jiān)視工具可以看到，IE發(fā)起了100個請求，一個都不cache！

在FireFox下面就沒有問題，只發(fā)起一個請求。

復(fù)制代碼代碼如下:

用這段代碼可以解決這個問題  

<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> 

復(fù)制代碼代碼如下:

這個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> 