|
|
IE在解析innerHTML的時(shí)候居然會(huì)忽略Cache策略，簡(jiǎn)單的重復(fù)加載圖片。請(qǐng)看以下代碼：
<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>
保存到本地作為一個(gè)htm文件，然后用IE打開（允許腳本運(yùn)行），然后用http監(jiān)視工具可以看到，IE發(fā)起了100個(gè)請(qǐng)求，一個(gè)都不cache！
在FireFox下面就沒有問題，只發(fā)起一個(gè)請(qǐng)求。
復(fù)制代碼 代碼如下:
用這段代碼可以解決這個(gè)問題
<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ù)制代碼 代碼如下:
這個(gè)bug的官方描述見：
http://support.microsoft.com/default.ASPx?scid=kb;en-us;319546
此外 http://www.bazon.NET/mishoo/Articles/msie/958/ 指出background-image會(huì)帶來(lái)一樣的問題。
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>
如果不怕麻煩的話，這樣做可以更快一點(diǎn)點(diǎn)，也更保險(xiǎn)：
<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技術(shù)：IE 緩存策略的BUG的解決方法，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
