js动态替换img的src导致内存不断增长

特定用 IE 进程中查看iexplore.exe 不断增长。

不替换src了，给多个图片不同src，让一些隐藏，需显示时再让其显示

可以试试6#的，remove掉再重新append img标签

这个我能告诉你我们图片有多少吗？服务器都做了磁盘阵列。至少都是几个T的图片
你意思是将img 标签删除吗？那样不行，我将div都重新覆盖了。还是会的而且现在我是js重定向url传参数进行更改图片问题还是依旧。。

走正规路线先设置图片的src = ''
在删除图片
在添加新图片
另外仔细在看了遍你的问题内存在一定范围内增加也是正常的吧浏览器总会做点缓存处理

我这样你看行不。
img = null;
delete img;
CollectGarbage();

吧img的src设置成null 强制释放吧
以前好像听说过 ie需要这样

这个是做的测试
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'MyJsp.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
    <%--<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
--%><link rel="stylesheet" href="jquery.jqzoom.css" type="text/css">
<style type="text/css">
body{margin:0px;padding:0px;font-family:Arial;}
a img,:link img,:visited img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }
*{margin:0;padding:0;}
p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
dl dd{margin:0px;}
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}

ul#thumblist{display:block;}
ul#thumblist li{float:left;margin-right:2px;list-style:none;}
ul#thumblist li a{display:block;border:1px solid #CCC;}
ul#thumblist li a.zoomThumbActive{
    border:1px solid red;
}
.jqzoom{

text-decoration:none;
float:left;
}
</style>
<script type="text/javascript" src="jquery-1.6.js"></script>
<script type="text/javascript" src="jquery.jqzoom-core-pack.js"></script>
<script type="text/javascript">
var intervalID = 0;
var array = new Array();
var isAuto = false;
$(document).ready(function()  {
$('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: true,
            alwaysOn:false,
            title:false,
                  width:250,
             height:250
         });
initData();
});

function initData(){
array.push("http://sgits:90/stoplight/LP101008100415110819174203218_川E38415_黑_71.0_")
array.push("http://sgits:90/stoplight/LP101008100415110819173440199_川EH8399_蓝_72.7_");
array.push("http://sgits:90/stoplight/LP101008100415110819172525161_");
array.push("http://sgits:90/stoplight/LP101008100415110819172331148_");
array.push("http://sgits:90/stoplight/LP101008100410110816160927745_川E52321_蓝_79.3_");
array.push("http://sgits:90/stoplight/LP101008100410110816155445678_川E51270_蓝_87.7_");
array.push("http://sgits:90/stoplight/LP101008100403110816161430612_川OR10U7_蓝_80.2_");
array.push("http://sgits:90/stoplight/LP101008100403110816161324602_11117Z0_蓝_70.2_");
array.push("http://sgits:90/stoplight/LP101008100403110816161323601_川E39720_蓝_77.8_");
array.push("http://sgits:90/stoplight/LP101008100403110816160908546_川E52607_蓝_74.0_");
array.push("http://sgits:90/stoplight/LP101008100403110816160353514_川E68532_蓝_78.7_");
array.push("http://sgits:90/stoplight/LP101008100403110816160046491_川AT781E_蓝_78.1_");
array.push("http://sgits:90/stoplight/LP101008100403110816160353514_川E68535_蓝_78.7_");
array.push("http://sgits:90/stoplight/LP101008100403110816160908546_川E52687_蓝_74.0_");
array.push("http://sgits:90/stoplight/LP101008100403110816161323601_川E39725_蓝_77.8_");
array.push("http://sgits:90/stoplight/LP101008100403110816161324602_11117Z0_蓝_70.2_");
array.push("http://sgits:90/stoplight/LP101008100403110816161324602_11117Z3_蓝_70.2_");
array.push("http://sgits:90/stoplight/LP101008100403110816161430612_川OR70U7_蓝_80.2_");
array.push("http://sgits:90/stoplight/LP101008100410110816155445678_川E57270_蓝_87.7_");
array.push("http://sgits:90/stoplight/LP101008100415110819174203218_川E38415_黑_71.0_");
array.push("http://sgits:90/stoplight/LP101008100415110819174203218_川E38485_黑_71.0_");
array.push("http://sgits:90/stoplight/LP101008100415110819173440199_川DH8399_蓝_72.7_");
}
function auto_refurbish(){
if (!isAuto) {
isAuto = true;
intervalID = window.setInterval("refreshData()", 4 * 1000);
} else {
isAuto = false;
window.clearInterval(intervalID);
}
}
function refreshData(){
var i = Math.floor(Math.random()*(21-0)+0);
count(array[i]+"1.jpg", array[i]+"2.jpg", array[i]+"3.jpg");
}
<%--
var tagnames =  document.getElementsByTagName("a");
var images = document.getElementsByTagName("img");
for(var loop = 0; loop < images.length; loop ++){
    var img = images[loop];
img = null;
delete img;
}
for(var loop = 0; loop < tagnames.length; loop ++){
    var a = tagnames[loop];
a = null;
delete a;
}
if (typeof(CollectGarbage) == "function") {
   setTimeout(CollectGarbage, 1);
}

var Request = new Object();
Request = GetRequest();
var index = Request['index'];
if (typeof(index) ==    "undefined" || index==null){
index = 0;
}
function next(){
index ++;
location ="MyJsp.jsp?index="+index+"&simg1="+array[index]+"1.jpg&simg2="+array[index]+"2.jpg&simg3="+array[index]+"3.jpg";
//count(array[i]+"1.jpg", array[i]+"2.jpg", array[i]+"3.jpg");

var tagnames =  document.getElementsByTagName("a");
var images = document.getElementsByTagName("img");
for(var loop = 0; loop < images.length; loop ++){
  var img = images[loop];
img = null;
delete img;
}
for(var loop = 0; loop < tagnames.length; loop ++){
  var a = tagnames[loop];
a = null;
delete a;
}
if (typeof(CollectGarbage) == "function") {
   setTimeout(CollectGarbage, 1);
}
var Img = new Image();
        Img.src = array[i];
        Img.width = 700;
        Img.height = 400;
document.getElementById("a1").appendChild(Img);
var Img = new Image();
        Img.src = array[i];
        Img.width = 100;
        Img.height = 100;
document.getElementById("a1").appendChild(Img);

} --%>
function previous(){
index --;
location ="MyJsp.jsp?index="+index+"&simg1="+array[index]+"1.jpg&simg2="+array[index]+"2.jpg&simg3="+array[index]+"3.jpg";
//count(array[i]+"1.jpg", array[i]+"2.jpg", array[i]+"3.jpg");
}
function count(pic1,pic2,pic3){
var tagnames =  document.getElementsByTagName("a");
for(var loop = 0; loop < tagnames.length; loop ++){
    var a = tagnames[loop];
    $(a).attr("rel",null);
}

$("#image").attr("src",null);
$("#simg1").attr("src",null);
$("#simg2").attr("src",null);
$("#simg3").attr("src",null);
document.getElementById("content").innerHTML = null;
var content = " <div class=\"clearfix\" id=\"content\" style=\"margin-top:100px;margin-left:350px; height:500px;width:500px;\" ><div  class=\"clearfix\" >";
if(pic1 != "") {
content += "<a class=\"jqzoom\" rel='gal1'  title=\"triumph\" id=\"a1\">" +
"<img   id=\"image\" src=\""+pic1 + "\" width=\"700px\" height=\"400px\" style=\"border: 4px solid #666;\"  />" +
"</a></div>";
}
content += "<div class=\"clearfix\">" +
"<ul id=\"thumblist\" class=\"clearfix\" >";
content += "<li><a class=\"zoomThumbActive\" href=\"javascript:void(0);\" " +
"rel=\"{gallery: 'gal1', smallimage: '"+pic1 + "',largeimage: '" + pic1 + "'}\">" +
"<img id=\"simg1\"  src='"+pic1
+ "' width=\"100px\" height=\"100px\" /></a></li>";
content += "<li><a href='javascript:void(0);' rel=\"{gallery: 'gal1', " +
"smallimage: '" +pic2+ "',largeimage: '" + pic2 + "'}\">" +
"<img id=\"simg2\" onerror=\"imgError(this, 2);\" src='" +
pic2 + "' width=\"100px\" height=\"100px\" /></a></li>";
content += "<li><a href='javascript:void(0);' rel=\"{gallery: 'gal1', smallimage: '" +
pic3 + "',largeimage: '"+ pic3 + "'}\">" +
"<img id=\"simg3\" onerror=\"imgError(this, 2);\" src='" +
pic3 + "' width=\"100px\" height=\"100px\" /></a></li></ul></div>";
$("#content").html("");
document.getElementById("content").innerHTML = content;
}
function GetRequest() {
   var url = location.search; //获取url中"?"符后的字串
   var theRequest = new Object();
   if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
      }
   }
   return theRequest;
}
    </script>
  </head>
  <body>
  <div id="content" >
  <div class="clearfix"  style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
   <div class="clearfix">
  <a class="jqzoom" rel='gal1'  title="triumph" id="a1">
   <img alt="" id="image" width="700" height="400" src=<%=request.getParameter("simg1") %> style="border: 4px solid #666;">
  </a>
    </div>
    <div class="clearfix" >
<ul id="thumblist" class="clearfix" >
<li>
<a  class="zoomThumbActive" href='javascript:void(0);'
rel="{gallery: 'gal1', smallimage: <%=request.getParameter("simg1") %>,
largeimage: <%=request.getParameter("simg1") %>}" >
<img width="100" height="100" id="simg1" src=<%=request.getParameter("simg1") %>>
</a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage:<%=request.getParameter("simg2") %> ,
largeimage: <%=request.getParameter("simg2") %>}">
<img width="100" height="100" id="simg2" src=<%=request.getParameter("simg2") %>>
</a></li>
<li><a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: <%=request.getParameter("simg3") %>,
largeimage: <%=request.getParameter("simg3") %>}">
<img width="100" height="100" id="simg3" src=<%=request.getParameter("simg3") %>>
</a></li>
</ul>
</div>
</div>
</div>
  <input type="button"  id="btn" value="下一个" onclick="next()"/>
   <input type="button"  id="btn" value="上一个" onclick="previous()"/>
   <input type="button"  id="auto_btn" value="自动" onclick="auto_refurbish()">
  </body>
</html>
用的 IE 8  IE 7 也试过。

var images = document.getElementsByTagName("img");
for(var loop = 0; loop < images.length; loop ++){
    var img = images[loop];
    img = null;
    delete img;
}这段代码有语法问题。images[loop]的引用并没有被释放，所以垃圾也不可能回收。另外img已经为null了, 你再delete有什么意思呢？删除一个空指针？而且delete通常不用于释放对象.这个循环其实什么事情都没有做。你用一个局部变量复制了一个引用，然后再将这个局部变量的引用释放，然后试图删除一个空对象。

delete 主要是在网上看的js释放内存代码是要这样写。
’images[loop]的引用并没有被释放‘那我可以这样写吗？
var images = document.getElementsByTagName("img");
for(var loop = 0; loop < images.length; loop ++){
images[loop] = null;
delete images[loop] ;
}

你可以这样试试：var images = document.getElementsByTagName("img");for(var loop = 0; loop < images.length; loop ++){    var parent = images[loop].parentNode;

    //这里创建新的image
    var image = document.createElement('img');    //然后进行一番设置 ......    parent.replaceChild(image, images[loop]);}images = null;如果资源还没有释放，那肯定是还有变量在引用它，你自己检查一下。

我兼容 firefox 之后测试了下，就没这个问题了，哎坑爹的ie

调试易

js动态替换img的src导致内存不断增长

解决方案 »