|
|
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技術：IE 緩存策略的BUG的解決方法，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
