IE8中img动态修改src时，内存不能释放的问题

在IE8中，用javascript动态修改src时，内存一直增加，无法释放，直到图片无法显示。
图片有300张左右，每张700K左右。如:document.getElementById("myimg").src = imglist[nCurImg];用CollectGarbage();手动释放，效果也不明显。大家有什么解决方法。
在IE6和IE9中，貌似没有这个问题。
代码如下:
-----------------------------------------------------<html>
<head>
</head>
<body><input type="button" name="input1" value="showNext" onclick="showNext()">
<input type="button" name="input1" value="showAll" onclick="showAll()">
<input type="button" name="input1" value="relaease" onclick="release()">
<input type="button" name="stop" value="stop" onclick="stop()"><br>
<img alt="" id="myimg" src="image/default.jpg"  /><script>
        // 图片实际300张左右，现在只写了4张的，作为例子。
var imglist = new Array("./img/1.jpg", "./img/2.jpg","./img/3.jpg","./img/4.jpg");
        var nCurImg = -1;
        var timer = null;</script><script type="text/javascript">
function showAll()
{
timer = setInterval("show()", 1000);
}
function show()
{
nCurImg = nCurImg + 1;
document.getElementById("myimg").src = imglist[nCurImg];}
function showNext()
{ nCurImg = nCurImg + 1;
document.getElementById("myimg").src = imglist[nCurImg];
}
function release()
{ CollectGarbage(); window.clearInterval(timer);
timer = null; document.getElementById("myimg").src  = null;
CollectGarbage();
}function stop()
{
window.clearInterval(timer);
timer = null;
}
</script>
</body>
</html>

解决方案 »

  1.   

    外面套个容器，然后使用innerHTML()方法更新，试试还会不会内存泄漏：
    <div id="myimg"></div>
    <script type="text/javascript">
    function show() {
    nCurImg = nCurImg + 1;
    document.getElementById("myimg").innerHTML = '<img alt="" src="'+imglist[nCurImg]+'" />';
    }
    function showNext() {
    nCurImg = nCurImg + 1;
    document.getElementById("myimg").innerHTML = '<img alt="" src="'+imglist[nCurImg]+'" />';
    }
    </script>
    另外，show()和showNext()函数的定义完全一样，只要定义一个就可以的吧。
      

  2.   

    这个问题啊，优质得深入研究的必要、实际上在使用JQ的时候，经常会出现这样的问题，主要原因就是因为JQ在内容管理方面欠缺造成的。相应的你在使用Google MAP API的时候，却不会发生相关的问题。这里面有一个很巨大的问题，就是你的载入两几乎是没有极限的，如果你的载入两被控制在一个拥有极限的水平上呢？会再出这样的问题吗？200张图片，如果你设定的极限载入两是50，那么如果你载入的图片超过这个数量，就挤掉现在使用的，那么很好，你应该没有这样的问题了。不过这样又有了其他的问题。哎呀呀，咱就不说了。
      

  3.   

    谢谢大家的回复。
    尝试了大家说的方法问题并没有解决,包括异步加载图片，问题还是一样。新的发现就是图片大小不设置的时候，不会出现内存增加的问题(难道是之前虚拟内存设置的不对？)。
    如果设置图片显示大小，内存增加问题就出现了。比如把
    <img alt="" id="myimg" src="image/default.jpg" />
    修改为
    <img alt="" style="width:500px; height:500px;" id="myimg" src="image/default.jpg" />大家还有什么新的想法没有？
      

  4.   

    1、你把延时加长试试看看，如增加到5000。2、IE性能非常低下，1OOOms要把那样大的图片下载并渲染出来有难度滴，未完全完成的下载和渲染一个接一个，浏览器发送HTTP请求是很耗损内存的。这与DOM无关，就是有关CollectGarbage方法也收效甚微。3、可以考虑预加载试试，随手写参考代码如下：var arr = ["1.jpg", "2.jpg", "3.jpg" .... ];
    var obj = document.getElementById("myimg");var Idx = 0;
    var Len = arr.length;
    var Img = new Image();
    Img.src = arr[Idx];
    Img.onload = function() {
        obj.src = arr[Idx];
        Idx = ++ Idx % Len;
        setTimeout(function(){Img.src = arr[Idx]}, 2000);
    }
      

  5.   

    BTW：上面代码确保每张图片下载完毕—浏览器请求释放后，再预载下一张图片。刚才测试了下，可行。在实际应用中，因为网络质量速度环境千差万别，某个下载要很长时间才能够完成—浏览器处在请求状态没有释放，在这种情况下运行新的链接就会增加新的请求，内存耗损会随之不断增大。这问题，图片还好一点，特别是音频视频缓冲过程中被切换加载新的链接，会更加严重。
      

  6.   

    当然，还需考虑每张图片链接是否有效问题，否则会出现“卡死”，可以添加如下代码进行检测处理。Img.error = function() {
        Idx = ++ Idx % Len;
        setTimeout(function(){Img.src = arr[Idx]}, 2000);
    }
      

  7.   

    谢谢prototyper的回答。先说下前提条件，就是 a. 1秒钟一张 b.图片放在局域网可以,系统不对外开放。 c.图片很多500张左右。
    d. 图片大小每张700k; 2593*1936;1. 如果不设置图片的大小，让图片显示原始的尺寸，1秒中显示1张，都不会出现问题。
    2. 如果设置图片的大小，就算6秒中显示一张，都会出现内存增加问题。
    3. 感觉关键的问题是，为什么设置图片大小的时候会导致内存增加，且不能自动释放。
        IE7中为什么就没问题呢。
    <img alt="" style="width:500px;" id="myimg" src="image/default.jpg" />
      

  8.   


    1、如果这样滴，那应该就是IE8的BUG了。
    2、IE8增强了图片锯齿平滑处理功能，也就是当图片显示尺寸与原来尺寸不一样时，无论是放大还是缩小，浏览器渲染出来都会出现锯齿，为了浏览视觉平滑，浏览器貌似除了FF外都会对锯齿进行平滑处理，且IE8处理算法或方法最有效。但我猜测，IE8对图片缩放锯齿的正常处理存在一个缩放比率的上限，超过该上限程序无法有效完成，被占用内存区间处于Releasing状态。再就是2593/500 = 5.186，width=height=500不是等比缩放，这会溢出IE8对JPG的平滑处理环境吗？
    3、为了检验上述猜测，请你先把缩放比调整在1倍以内(int:2或者只有1位浮点小数)，并等比width和height试试看。再适当加大缩放比，测试该正常运行上限。
      

  9.   

    在所有浏览器中，IE8图片锯齿平滑处理效果最好，但物极必反，是否在算法上过份强调修饰细节，加大系统资源（CPU & Memory）耗损，甚至存在一个算法溢出BUG呢？
      

  10.   

    prototyper回答为正解！IE8增强了图片锯齿平滑处理功能，也就是当图片显示尺寸与原来尺寸不一样时，无论是放大还是缩小，浏览器渲染出来都会出现锯齿，为了浏览视觉平滑，浏览器貌似除了FF外都会对锯齿进行平滑处理，且IE8处理算法或方法最有效。IE8的图片平滑算法和在IE6中使用VML图片矢量算法的处理效果有些类似。而且该算法在缩放处理锯齿后，百分百会急剧降低浏览器的反应速度，我在IE6/7/8/9上进行了测试，的确只有IE8进行了平滑处理，而IE9将这个算法取消了。从另一方面说，微软也可能认为该算法效率低下而且存在内存溢出的BUG才放弃如此好效果的算法。
      

  11.   

    试试动态的创建 IMG DOM对象, 设置完SRC显示出来后, 移除掉这个DOM释放掉, 然后重新创建IMG