<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试ajax引起图片下载的问题</title>
</head>
<body>
</body>
<script type="text/javascript">
<!--
var st="<img name=\"img1\" src=\"http://space.cnblogs.com/images/logo.gif\">"
var ar = new Array(101);
window.οnlοad=function(){
document.body.innerHTML = ar.join(st);
}
</script>
</html>
以上页面代码就会引起所有img元素重新从服务器加载图片。 分析以后，觉得先让浏览器生成img的dom对象，然后更改属性。所以进行修改如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试ajax引起图片下载的问题</title>
</head>
<body>
</body>
<script type="text/javascript">
<!--
var st="<img name=\"img1\" src=\"\">"
var ar = new Array(101);
window.οnlοad=function(){
document.body.innerHTML = ar.join(st);
var obj = document.getElementsByTagName("img");
for(var i = 0;i < obj.length; i++){
obj[i].src = "http://space.cnblogs.com/images/logo.gif";
}
}
</script>
</html>
发现，以上代码依然会引起所有img元素重新从服务器下载图片。 最后把代码执行时机进行改变，修改代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试ajax引起图片下载的问题</title>
</head>
<body>
</body>
<script type="text/javascript">
<!--
var st="<img name=\"img1\" src=\"http://space.cnblogs.com/images/logo.gif\">"
var ar = new Array(101);
document.body.innerHTML = ar.join(st);
</script>
</html>
发现所有img从服务器重新请求的问题已经解决。代码改成以下情况也一样：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试ajax引起图片下载的问题</title>
</head>
<body>
</body>
<script type="text/javascript">
<!--
var st="<img name=\"img1\" src=\"\">"
var ar = new Array(101);
document.body.innerHTML = ar.join(st);
var obj = document.getElementsByTagName("img");
for(var i = 0;i < obj.length; i++){
obj[i].src = "http://space.cnblogs.com/images/logo.gif";
}
</script>
</html>
也不存在所有img重新下载图片的情况。 因此，看来是页面上js构造html元素的时机将引起IE浏览器对图片的缓存策略的问题。使用ajax请求数据，动态构建UI的时候，
这个问题一定要注意。
扫一扫
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
