ie 每次用innerHTML输出里面包含图片元素会每次都请求该怎么办

测试代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body><div id='xx'></div>
</body>
<script>
window.onload = function(){ var div =document.getElementById('xx');
for(var i=0;i<20;i++){
var span = document.createElement('span');
span.innerHTML = "<img src='http://community.csdn.net/ui/scripts/System/_resource/blank.gif'>";
div.appendChild(span)
}
}
</script></body>
</html>
ie6下每次都会请求该图片
怎么让他知请求一次了

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

innerHTML会重写页面流。会更新DOM结构。
     var div =document.getElementById('xx');
var h='';
    for(var i=0;i<20;i++){
        var span = document.createElement('span');
       h+ = "<span><img src='http://community.csdn.net/ui/scripts/System/_resource/blank.gif'></span>";

    }
div.innerHTML(h);
to 1
你说的我不懂
你不如修改下代码吧
怎么让它怎么对图片只发送一次请求、to2
不明白
不知道你想说明什么
我想说下我想知道的
一共有20个一样的图片我只希望他只发送一次请求
你可以用httpwatch 或者 fiddler会看请求
只是在ie6下才会重复发送
不明白与改变dom结构有什么关系to3
先把代码写对了先
一看就能看看到代码是错的
有20个图片，发送一次请求只能给一个图片赋予src。其他的19个怎么办？其实发送20个请求是不错，但影响WEB效率的大头原因是网络速度。尽管有20次，但只是第一次到CSDN SERVER去取图片，其他19次应该都可以在缓存里取到了。因此，20次就20次吧。呵呵
1\ 用createDocumentFragment
window.onload = function(){    var div =document.getElementById('xx');
var df=document.createDocumentFragment();
    for(var i=0;i<20;i++){
        var span = document.createElement('span');
        span.innerHTML = "<img src='http://community.csdn.net/ui/scripts/System/_resource/blank.gif'>";
        df.appendChild(span)
    }  div.appendChild(df);}2、用div innerHTMLwindow.onload = function(){    var div =document.getElementById('xx');
var arr=[];
    for(var i=0;i<20;i++){
       arr.push( "<img src='http://community.csdn.net/ui/scripts/System/_resource/blank.gif'>");    }  div.innerHTML=arr.join("");}
好吧，我是3楼<script type="text/javascript">var div =document.getElementById('xx');
var h='';
for(var i=0;i<20;i++){
   h+= "<span><img src='http://www.baidu.com/img/baidu_sylogo1.gif'></span>";
}
div.innerHTML=h;
</script>
to5楼
请求20次还不算多  如果上上千次了  我昨天弄了个树  今天早上到公司一看 (ps 公司才有ie6)
不停请求在请求  看着蛋疼to 7,8楼
不知道你们测试没有
依旧是请求20次问题找到了
http://topic.csdn.net/u/20080825/00/9fe0f232-21d7-4e6f-870c-e2d288799230.html http://www.zoomhoo.com/viewthread.jsp?tid=629ie6 onload里面用innerHTML  会忽略本地的缓存
利用cloneNode方法，克隆DOM对象就不会重新加载了。demo如下，集体细节需要你自己再整理。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body><div id='xx'></div>
</body>
<script>
window.onload = function(){
var model = document.createElement('span');
model.innerHTML = "<img src='http://csdnimg.cn/www/images/csdnindex_logo.gif'/>";
var img = model.getElementsByTagName('img')[0];
img.onload = function() {
img.onload = null;
var div = document.getElementById('xx');
for(var i = 0; i < 20; i++){
var span = model.cloneNode(true);
div.appendChild(span)
}
model.parentNode.removeChild(model);
}
document.body.appendChild(model);
}
</script>
</body>
</html>
window.onload = function(){    var div =document.getElementById('xx');
    var tmp=[];
    for(var i=0;i<20;i++){
        tmp.push('<span>'+
            +"<img src='http://community.csdn.net/ui/scripts/System/_resource/blank.gif'>";
           +'</span>');
    }
    div.innerHTML+=tmp.join('');
}
至少可以优化一下
to zswang
你这么写不应该算是 copy节点影响的效果
onload 是延迟执行的都跳出onload的过程了
用innerHTML也是可以的
window.onload = function(){
    var model = document.createElement('span');
    model.innerHTML = "<img src='http://csdnimg.cn/www/images/csdnindex_logo.gif'/>";
    var img = model.getElementsByTagName('img')[0];
    img.onload = function() {
var div = document.getElementById('xx');
        /*img.onload = null;
        var div = document.getElementById('xx');
        for(var i = 0; i < 20; i++){
            var span = model.cloneNode(true);
            div.appendChild(span)
        }
        model.parentNode.removeChild(model);*/
var arr =[]
for(var i = 0; i < 20; i++){
arr.push("<img src='http://csdnimg.cn/www/images/csdnindex_logo.gif'/>")
        }
div.innerHTML=arr.join('');
    }
    document.body.appendChild(model);
}用setTimeout跟上面是一样的效果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ready</title>
</head>
<body>
<div id='xx'></div>
</body>
<script> setTimeout(function(){
var div = document.getElementById('xx');
        /*img.onload = null;
        var div = document.getElementById('xx');
        for(var i = 0; i < 20; i++){
            var span = model.cloneNode(true);
            div.appendChild(span)
        }
        model.parentNode.removeChild(model);*/
var arr =[]
for(var i = 0; i < 20; i++){
arr.push("<img src='http://csdnimg.cn/www/images/csdnindex_logo.gif'/>")
        }
div.innerHTML=arr.join('');
},0)
}
</script></body>
</html>
上面说的
onload 是延迟执行的都跳出onload的过程了
我的意思是
img.onload是延迟执行的都跳出window.onload的过程了
你可以先创建一个img，预加载图片啊。然后在window.onload里把一个完整节点添加好，cloneNode它
to toury
这种方法也是不行的哦
感觉在onload里面创建图片都去发出请求
测试代码<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ready</title>
<script>
var img = document.createElement('img');
img.src='http://csdnimg.cn/www/images/csdnindex_logo.gif';
</script>
</head>
<body>
<div id='xx'></div>
</body>
<script>
window.onload = function(){
var div = document.getElementById('xx')
for(var i=0;i<20;i++){
div.appendChild(img.cloneNode(true));
}
}
</script>
</body>
</html>
我用你15楼代码，循环1000次，用时40秒上下（ie6）
for(var i=0;i<1000;i++){
        div.appendChild(img.cloneNode(true));
    }
这样试试
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ready</title>
<script>
var img = document.createElement('img');
img.src='http://csdnimg.cn/www/images/csdnindex_logo.gif';
</script>
</head>
<body>
<div id='xx'></div>
</body>
<script>
window.onload = function(){
    var div = document.getElementById('xx')
    div.appendChild(img);
    for(var i=0;i<20;i++){
     document.body.appendChild(div.cloneNode(true));
        //div.appendChild(img.cloneNode(true));
    }
}
</script>
</body>
</html>
代码就不写了，太晚了，不想动。1。打开IE6的背景图缓存2。创建容器HTML片断，赋相同的className，在CSS中将图片以背景的形式展现出来。如果要考虑图片尺寸的问题，可以先new Image()加载一次图片，成功后获取尺寸，然后再进行2。

ie 每次用innerHTML输出 里面包含图片元素 会每次都请求 该怎么办

解决方案 »

ie 每次用innerHTML输出里面包含图片元素会每次都请求该怎么办