Memory leak when dynamically refreshing an image using javascript

Question

I'm trying to get rid of a nasty memory leak in my browser.

This is what I am trying to do:
- I am periodically trying to refresh an image in an HTML page using javascript.
- All code should be compatible with internet explorer 6 or higher and firefox.

You can find my code below.

This is what I observed: Every time I poll for a new image it seems that the browser keeps the previous image in its cache. Hence, the memory usage of chrome9/Internet Explorer 6&8/ Safari 5 keeps growing linear in time. Only firefox (3.6) seems to behave normal when I add no-cache headers to the image. I've set the refresh rate quite high (10ms) in order to quickly see the memory grow.

What I already tried:
-Adding headers to the image that disables the caching: only works for firefox
This is the response header:

HTTP/1.1 200 OK Date: Mon, 14 Feb 2011 11:17:02 GMT Server: Apache/2.2.9 (Debian) PHP/5.2.6-1+lenny9 with Suhosin-Patch mod_python/3.3.1 Python/2.5.2 X-Powered-By: PHP/5.2.6-1+lenny9 Pragma: no-cache Cache-control: no-cache, no-store, must-revalidate, max-age=1, max-stale=0, post-check=0, pre-check=0, max-age=0 Expires: Mon, 14 Feb 2011 11:17:02 GMT Content-Length: 358 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: image/png

-Requesting the image in base64 string format through a POST method (POST requests are by default not cached): makes no difference
-Trying various things like settings variables to null and calling clearInterval or comparable methods.
-Changing/not changing the image name every time I do a request.
-Loading the code below in an iFrame and refreshing the iFrame every 5 seconds seems to clean up the memory in all browsers except for IE6, so this isn't a solution.
-Lots of other things that didn't seem to work.

I hope any of you smart fellas may be able to help me. I'm getting quite desperate =)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, max-age=-1, max-stale=0, post-check=0, pre-check=0">
    <meta http-equiv="expires" content="-1">
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
            background-color: #B0B9C0;
        }

        img {
            width: 167px;
            height: 125px;
            background-color: #B0B9C0;
            border: none;
        }
    </style>
    <script type="text/javascript">
        var previewUrl     = "http://nick-desktop/image/";
        var previewImage   = document.createElement("img");
        var previewTimeout = 10;
        var previewWidth   = 200;
        var previewHeight  = 80;
        var timerID = 0;

        function initialize() {
            if(previewTimeout==null || previewUrl == null || previewWidth==null || previewHeight==null) return;
            document.body.appendChild(previewImage);
            previewImage.src = previewUrl;
            previewImage.style.width = previewWidth+"px";
            previewImage.style.height = previewHeight+"px";
            timerID = setInterval(doPoll, previewTimeout);
        }

        function doPoll() {
            previewImage.src = previewUrl + new Date().getTime()+".png";
        }
    </script>
</head>
<body onload="initialize()">
</body>

Have you tried to remove the old image from the DOM before updating it? parent.removeChild(elemToRemove) — chriszero
– chriszero, Commented Feb 14, 2011 at 14:16
I did. I removed the image from the DOM and then created a new image to replace it. It gave the same outcome. — Nick
– Nick, Commented Feb 14, 2011 at 16:38
I managed to close the leak in IE though. I changed the image type from PNG to JPEG. That seemed to fix it. — Nick
– Nick, Commented Feb 14, 2011 at 16:39

samliew · Accepted Answer · 2011-04-12 09:07:46Z

Try this:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, max-age=-1, max-stale=0, post-check=0, pre-check=0">
    <meta http-equiv="expires" content="-1">
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
            background-color: #B0B9C0;
        }

        img {
            width: 167px;
            height: 125px;
            background-color: #B0B9C0;
            border: none;
        }
    </style>
    <script type="text/javascript">
        var previewUrl     = "http://nick-desktop/image/";
        var previewTimeout = 10;
        var previewWidth   = 200;
        var previewHeight  = 80;
        var timeout;

        window.onload = function() {
            if(previewTimeout==null || previewUrl == null || previewWidth==null || previewHeight==null) return;
            doPoll();
        }

        function doPoll() {
            clearTimeout(timeout);
            document.body.innerHTML = "";
            var previewImage = null;

            previewImage = document.createElement("img");
            previewImage.style.width = previewWidth+"px";
            previewImage.style.height = previewHeight+"px";
            previewImage.onload = function() { timeout = setTimeout(doPoll, previewTimeout); };
            document.body.appendChild(previewImage);

            previewImage.src = previewUrl + "image.png?datetime=" + new Date().getTime();
        }
    </script>
</head>
<body>
</body>
</html>

Collectives™ on Stack Overflow

Memory leak when dynamically refreshing an image using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related