Question

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

我目前每隔x秒更新一张图片。我想到的一些方法如下：

拿一个：

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

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

Take Two：

所以它正在创建DOM元素，所以我尝试了以下内容。

<div id="ImageHolder">

</div>

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

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

现在这样可以工作，但是当它变化时会引起闪烁，这是不受欢迎的。现在有了两个图像并且每隔一段时间交换它们工作正常，但我希望保持尽可能低的带宽。

修改1：

我的代码：

<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>

是否有人做过类似的事情并找到了可行的解决方案，或者如何在图像更新时防止内存泄漏/闪烁？

Answer 1

我从来没有想过像你的第一种方法那样做这个...有趣。我可以想象它会导致内存泄漏，因为每个图像都保存在内存中，因为实际上没有删除任何内容。这只是一个猜测。

我会建议坚持使用第二种方法，但要修改它以解决闪烁问题，就像在图像之间褪色一样。一个好的jQuery插件可以看jQuery Cycle Plugin

如果该插件没有为您执行此操作，或者您希望保持代码较小，则jQuery还内置了一些动画功能。fadeIn()和fadeOut()可能会很有用。

这样的事情可能会更好。

 <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);
}

我认为更简单的方法可能是:(延迟（）也可以是可选的，我只是把它放在那里，万一你需要它。）

$('#ImageHolder').fadeOut('fast').html(image).delay('100').fadeIn('slow');

此外，如果图像尚未预加载，则可能会延迟加载图像。我不是百分百肯定如何做到这一点，所以一个快速的谷歌搜索出现了这个： http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Answer 2

我相信你的“拿一个”应该有效。应该没有内存泄漏。你每次都要覆盖src标签 - 如果你没有其他对旧图像的引用，它们应该被垃圾收集。我在FF和Chrome中看到了这个问题。 Chrome告诉我JS内存使用量是不变的，内存必须丢失一些其他内容。我打开了一个Chrome错误： https://code.google.com/p/chromium/issues/detail?id=309543 如果你想要加入你的体重并且可能为这个问题做好准备：）

Answer 3

5岁的问题但它对我来说仍然“热”，我想分享我刚遇到的同样问题。

“采取一种”方法可能是每个程序员用来更改图像源的第一种方法，但到目前为止（此问题发布后5年）问题仍然存在，更改<img>'src经常，您可以在Windows任务管理器上看到您的浏览器变得贪婪。 “拿两个”创造了闪烁，很少被接受。幸运的是，html5附带<canvas>，因此我尝试使用<canvas>来解决此问题。

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;

发现新问题<canvas>与<img>不同，它不会自动调整大小并“适合”。我们必须手动调整图像大小以适应画布并保持比例。以下是解决问题的代码

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;

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

Answer 4

我使用了不同的方法来解决这个问题，但没有一种方法可行。当img.src = base64string并且那些内存永远不会被释放时，内存似乎会泄漏。这是我的解决方案。

fs.writeFile('img0.jpg', img_data, function (err) {
    // console.log("save img!" );
});
document.getElementById("my-img").src =  'img0.jpg?'+img_step;
img_step+=1;

我的电子应用程序每隔50ms更新一次img，内存不会泄漏。忘记磁盘使用情况。 Chrome的内存管理让我感到沮丧。

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

4 个答案: