系统地更新IMG的src。内存泄漏 [英] Systematically updating src of IMG. Memory leak

问题描述

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

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

I am currently updating an image every x sec. A few ways I thought of doing this were as follows:

拿一个：

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

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

Now this works perfectly changes the image but causes a memory leak.

Take Two：

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

So it is creating DOM elements, so I attempted the following.

<div id="ImageHolder">

</div>

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

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

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

Now this works but causes a flicker when it changes which is unliked. Now with two images and swapping them at intervals works fine, but I want to stay as low on bandwidth as possible.

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

---

有没有人做过类似的事情，发现一个有效的解决方案，或者如何在图像更新时防止内存泄漏/闪烁？

推荐答案

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

I have never thought of doing this like your fist method.. interesting. I can imagine that it causes a memory leak because every single image is kept in memory because nothing is actually removed. Thats just a guess though.

我会建议坚持第二种方法，但修改它以解决闪烁问题，比如图像之间的淡入淡出。一个好的jQuery插件是 jQuery Cycle Plugin

I would recomend sticking to the second method but modifying it so solve the flicker, like fading between images. A good jQuery plugin to look at would be the jQuery Cycle Plugin

如果那个插件没有为你做，或者你想保持代码小，jQuery也内置了一些动画功能。 fadeIn（）和 fadeOut（）可能会感兴趣。

If that plugin doesn't do it for you or you want to keep the code small, jQuery also has some animation functions built in. fadeIn() and fadeOut() may be of interest.

这样的事情可能会更好。

Something like this might work better.

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

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

I believe a shorter way to do this might be: (also delay() may be optional, I just put it there in case you need it.)

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

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

Additionally there may be a delay for the image to load if it hasn't been preloaded. I'm not 100% sure how to do that off the top of my head so a quick google seach came up with this: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

这篇关于系统地更新IMG的src。内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！