I am trying to get rid of an unpleasant memory leak in my browser.
This is what I am trying to do:
- I periodically try to update the image on the HTML page using javascript.
- All code must be compatible with Internet Explorer 6 or higher and firefox.
You can find my code below.
This is what I observed: Each time I look at a new image, it seems that the browser saves the previous image in the cache. Consequently, the memory usage of chrome9 / Internet Explorer 6 & 8 / Safari 5 continues to grow linearly in time. It seems that only firefox (3.6) behaves normally when I add no-cache headers to the image. I set the refresh rate high enough (10 ms) to quickly see memory growth.
What I already tried:
-Adding image headers that disables caching: works only for firefox
This is the response header:
HTTP / 1.1 200 OK Date: Mon, 02/14/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: Monday, Feb 14 2011 11:17:02 GMT Content-length: 358 Keep-Alive: timeout = 15, max = 100 Connection: Keep-Alive Content-Type: image / png
-Requesting an image in base64 format via the POST method (POST requests are not cached by default): it does not matter
-Bringing various things, such as parameter variables, to null and calling clearInterval or comparable methods.
-Changing / not changing the image name every time I make a request.
-Downloading the code below in iFrame and updating iFrame every 5 seconds seems to clear memory in all browsers except IE6, so this is not a solution.
-There are not many other things that do not seem to work.
I hope some of you smart guys can help me. I am very 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>