Memory leak when dynamically refreshing an image using javascript
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>
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>
加载中,请稍侯......
精彩评论