系统地更新IMG的src。 内存泄漏
系统地更新IMG的src。 内存泄漏。
我目前每隔x秒更新一张图片。 我想到的一些方法如下：
拿一个：
var url ="..."; $('#ImageID').attr('src', url); 现在这可以完美地改变图像， 但会导致内存泄漏。
拿两个：
所以它正在创建DOM元素，所以我尝试了以下内容。
var image - "..."; //Obv actual image in working. $('#ImageHolder').empty(); $('#ImageHolder').html(image);
现在这可以工作，但当它变化时会引起闪烁，这是不受欢迎的。 现在有两个图像并且间隔交换它们工作正常，但我希望保持尽可能低的带宽。
编辑1：
我的代码：
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); }
有没有人做过类似的事情并找到了一个有效的解决方案，或者我怎样才能在图像更新时防止内存泄漏/闪烁？
我从来没有想过这样做就像你的拳头方法..有趣。 我可以想象它会导致内存泄漏，因为每个图像都保存在内存中，因为实际上没有删除任何内容。 这只是一个猜测。
我建议坚持第二种方法，但修改它以解决闪烁，就像图像之间的淡化一样。 一个好的jQuery插件是jQuery Cycle Plugin
如果该插件不适合您，或者您希望保持代码较小，则jQuery还内置了一些动画函数.fadeIn（）和fadeOut（）可能会很有用。
这样的事情可能会更好。
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
我相信你的“拿一个”应该有效。 应该没有内存泄漏。 你每次都要覆盖src标签 – 如果你没有其他对旧图像的引用，它们应该被垃圾收集。 我在FF和Chrome中看到了这个问题。 Chrome告诉我JS内存使用量是不变的，内存必须丢失一些其他内容。 我已经打开了一个Chrome错误： https ： //code.google.com/p/chromium/issues/detail？id = 309543如果你想加入你的体重并且可能是明星的错误:)
5岁的问题，但对我来说仍然“热”，我想分享我刚遇到的同样问题。
“采取一种”方法可能是每个程序员用来改变图像源的第一种方法，但直到现在（问题发布后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;
发现新问题， 与不同，它不会自动resize和“适合”。 我们必须手动调整图像大小以适应canvas并保持比例。 以下是我解决问题的代码
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;
希望它能帮助任何面临同样问题的人。
我用不同的方法来解决这个问题，但没有一个能够解决。 当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的内存管理让我感到沮丧。