emu in blogjava
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  171 随笔 :: 103 文章 :: 1052 评论 :: 2 Trackbacks
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下面就没有问题，只发起一个请求。
posted on 2006-03-01 22:39 emu 阅读(5099) 评论(8)  编辑  收藏

评论

# re: IE 缓存策略的BUG 2006-03-02 01:55 qwang
用这段代码可以解决这个问题

<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>  回复  更多评论
  

# re: IE 缓存策略的BUG 2006-03-02 09:16 emu
逐个 document.getElementById("p1").src=imageholder.src; 是没有问题，问题是把图片的完整html一次全部写入innerHTML造成的。  回复  更多评论
  

# re: IE 缓存策略的BUG 2006-03-02 09:44 emu
这个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>
  回复  更多评论
  

# re: IE 缓存策略的BUG 2006-03-02 17:20 emu
emu的解决方案如下：

<HTML>
<HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var st="<img src='about:blank' onerror='src=\"http://imgcache.qq.com/izone/client/mate.gif\";onerror=null'>"
var ar = new Array(101);
window.onload=function(){
 document.body.innerHTML = ar.join(st);
}
//-->
</SCRIPT>
</BODY>
</HTML>  回复  更多评论
  

# re: IE 缓存策略的BUG 2006-03-17 18:34 emu
emu一个可能要好一点的解决方案：

// 以 <img src="about:blank" onerror=regImg(this,"http://...gif") /> 的方式定义图片可以避
// 免重复加载和图片堵塞页面问题。建议在发现图片下载造成页面延迟的情形下使用。
var imgHash = new Object();
function regImg(e,src){
if(src.indexOf("[%")>0)return;
var a = imgHash[src];
e.onerror=null;
if(a==null) {
a=imgHash[src]=[];
a[0]=new Image();
a[1]=e;
a[0].onload=function(){setImges(a)};
a[0].src=src;
setTimeout("imgHash[\""+src+"\"]=null",65535)
}else{
if(a[0].readyState=="complete")
e.src=src;
else
a[a.length]=e;
}

}
function setImges(a){
for(var i=1;i<a.length;i++)
a[i].src=a[0].src;
}
  回复  更多评论
  

# re: IE 缓存策略的BUG 2007-10-08 19:38 meizz
忽略本地缓存的原因并不是用 innerHTML 创建，而是你在 window.onload 里调用这种创建模式，换个代码：
<html>
<body>
<div id="dd"></div>
</body>

<script type="text/javascript">
var a = new Array(11);
var s = "<img alt='' src='http://www.baidu.com/img/logo.gif' /><br/>";
document.getElementById("dd").innerHTML = a.join(s);
</script>
</html>

只是把脚本代码延后直接运行就没有了这个BUG。
http://blog.csdn.net/meizz/archive/2007/10/08/1815790.aspx  回复  更多评论
  

# re: IE 缓存策略的BUG 2007-10-10 13:57 emu
上面的做法不算是延后吧：
<HTML>
<BODY onload="alert('onload')">
</BODY>
<SCRIPT LANGUAGE="JavaScript">
alert("test")
</SCRIPT>
</HTML>
  回复  更多评论
  

# re: IE 缓存策略的BUG 2008-12-31 02:55 母延年
真是万分感谢，这个问题解决了好久，这一宿没白忙。

我采用了这种方法 IE6下图片确实只请求了一次，谢谢，
_$(id).innerHTML=strTree;
var list=_$(id).getElementsByTagName("img");
for(var i=0,l=list.length;i<l;i++)
{
var src=list[i].getAttribute('_src');
if(src)
{
list[i].src=src;
}
}  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: