管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　今天是发现bug的高产期。

　　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

教程首页 更多教程