Javascript 系统更新IMG的src。内存泄漏

系统地更新IMG的src。内存泄漏。

我目前每x秒更新一个图像。我想到的几种方法如下：

拿一个：

var url ="...";
$('#ImageID').attr('src', url);

现在，此操作可以完美地更改图像，但会导致内存泄漏

拿两个：

var url ="...";
$('#ImageID').attr('src', url);

它正在创建DOM元素，所以我尝试了以下方法

<div id="ImageHolder">

</div>

var image - "..."; //Obv actual image in working.

$('#ImageHolder').empty();
$('#ImageHolder').html(image);

变量图像-“…”//Obv工作中的实际图像。
$（'#ImageHolder'）.empty（）；
$（'#ImageHolder'）.html（图像）；

现在，这可以工作，但当它改变时会导致闪烁，而这是未链接的。现在，使用两个图像并每隔一段时间交换它们效果很好，但我希望尽可能保持低带宽

编辑1:

var url ="...";
$('#ImageID').attr('src', url);

我的代码：

<form name="selected">
<input type="hidden" name="map" />
</form>

<img id="MyMaps" src="http://localhost/web/blank.png" alt="" />


<script type="text/javascript">
var locate = window.location;
var uri = document.selected.map.value;

var MyHost = window.location.hostname;
    function delineate2(name) {
        totheleft= uri.indexOf("maps/") + 5;
        totheright= uri.lastIndexOf("&");
        return (uri.substring(totheleft, totheright));
    }

    function loadImage() {
        var CurrentMap = delineate2(name);
        var url = 'http://' + MyHost+ '/map/' + CurrentMap+ '/image?' + new Date().getTime();

        $('#MyMaps').attr('src', url);

        setTimeout(loadImage, 10000);
    }
</script>

var locate=window.location；
var uri=document.selected.map.value；
var MyHost=window.location.hostname；
功能描述2（名称）{
totheleft=uri.indexOf（“maps/”）+5；
totheright=uri.lastIndexOf（“&”）；
return（uri.substring（totheleft，totheright））；
}
函数loadImage（）{
var CurrentMap=2（名称）；
var url='http://'+MyHost+'/map/'+CurrentMap+'/image？'+new Date（）.getTime（）；
$（'#MyMaps'）.attr（'src'，url）；
设置超时（loadImage，10000）；
}

---

---

是否有人做过类似的事情并找到了有效的解决方案，或者我如何才能防止图像更新时内存泄漏/闪烁？我从未想过像你的First方法那样做。。有趣。我可以想象，它会导致内存泄漏，因为每个图像都保存在内存中，因为实际上没有删除任何内容。不过这只是一个猜测

我建议坚持第二种方法，但修改它以解决闪烁问题，如图像之间的褪色。一个好的jQuery插件应该是

如果该插件不适合您，或者您希望代码保持较小，jQuery还内置了一些动画功能。可能会引起兴趣

像这样的东西可能会更好

 <div id="ImageHolder">

</div>

var image - "..."; //Obv actual image in working.

function loadImage() {

choose your image however you want to, preferably a preloaded image.

$('#ImageHolder').fadeOut('fast');
$('#ImageHolder').html(image);
$('#ImageHolder').fadeIn('fast');
setTimeout(loadImage, 10000);
}

此外，如果图像尚未预加载，则可能会延迟加载。我无法100%确定如何做到这一点，所以谷歌快速搜索得出以下结论：

我相信你的“一招”应该行得通。应该没有内存泄漏。每次都会覆盖src标记-如果没有对旧图像的其他引用，它们应该被垃圾收集。我在FF和Chrome中看到了这个问题。Chrome告诉我JS的内存使用是恒定的，内存肯定会在其他地方丢失。 我打开了一个Chrome bug：

---

如果你也想增加体重，也许会成为问题的主角：）

5年前的问题对我来说仍然很“热”，我想分享我刚刚面临的问题

“take one”方法可能是每个程序员用来更改图像源代码的第一种方法，但是直到现在（这个问题发布5年后），问题仍然存在，请更改

，因此我尝试使用

来克服这个问题

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
img = new Image();
img.onload = function () {
    ctx.drawImage(img, 0, 0);
    img.src = "";
}
img.src = "data:image/png;base64," + stringSource;

发现的新问题，

与

不同，它不会自动调整大小和“适合”。我们必须手动调整图像大小以适应画布并保持比例。下面是我解决这个问题的代码

---

希望它能帮助任何面临同样问题的人。

我用过不同的方法来解决这个问题，但没有一种有效。当img.src=base64string时，内存似乎会泄漏，而这些内存永远无法释放。这是我的解决办法

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
img = new Image();
img.onload = function () {
    var imageWidth = canvas.width;
    var imageHeight = canvas.height;
    var xPosition = 0;
    var yPosition = 0;
    var proportion = 1;
    var padding = 2;
    if ((img.width / canvas.width) > (img.height / canvas.height)) {
        proportion = img.width / canvas.width;
    }
    else {
        proportion = img.height / canvas.height;
    }
        imageWidth = img.width / proportion;
        imageHeight = img.height / proportion;
        xPosition = (canvas.width - imageWidth) / 2;
        yPosition = (canvas.height - imageHeight) / 2;
        ctx.drawImage(img, 0, 0, img.width, img.height, xPosition+padding, yPosition+padding, imageWidth-2*padding, imageHeight-2*padding);
            img.src = "";
    }
    img.src = "data:image/png;base64," + stringSource;

我的电子应用每50毫秒更新一次img，内存不会泄漏。

---

忘记磁盘使用。Chrome的内存管理让我恼火。

你是如何确定第一种方法是内存泄漏的？在每个浏览器中运行几个小时。然后用第二种方法尝试同样的方法。你的代码的其余部分在哪里？我不认为需要它，但现在将添加它。我还想知道你是如何识别内存泄漏的。浏览器进程是否会变得臃肿或其他？？？有趣的方法，将尝试在2个Absolute div之间切换，以便清除DOM。第2个div是视图中的一个，反之亦然。添加了一些有关预加载的内容，可能会使其看起来更干净是的，预加载是一个好主意，am当前测试将等待数小时，但正在尝试运行.clear（）的进程；在ImageID上，它似乎抑制了内存使用，但目前还不能确定。以30毫秒的更新速度运行它们以真正推动这件事。结果表明，jquery中的XHR请求存在IE8内存泄漏。修补它完全解决了这个问题，而不必玩图像。jquery论坛上有一些关于它的票证/注释。（1.4.x）