Hi,
I'm trying to solve a problem with a memory leak in IE with Javascript. Basicaaly I'm using javascript to add icons on top of an image then I need to refresh the icons periodically by deleting them and re-adding them. When I run the app through drip though (IE6 memory usage indicating tool), when I delete the images before redrawing them, the memory never gets reclaimed Anyone have any ideas on how to force it to reclaim that memory ?
code below - the periodicalExecuter is a timing mechanism from Prototype :
<pre>
<head>
<script src="Prototype/prototype-1.6.0.3.js" type="text/javascript"></script>
<style>
#container {
position:absolute;
left:20px;
top: 20px;
height:700px;
width:700px;
background-color: pink;
}
</style>
<script>
function addIcons() {
var ctr = document.getElementById("container");
var x = 0;
var y = 0;
var x1 = 0;
var y1 = 0;
var cnt = 0;
var imgStr = "";
var img;
var div1;
new PeriodicalExecuter(function(pex) {
y1 = cnt % 13;
if (y1 == 0) {
x1++;
}
x = (x1 + 1) * 21;
y = (y1 + 1) * 21;
div1 = document.createElement('div');
div1.id = 'img_' + (x1 - 1).toString() + y1.toString();
div1.style.position = "absolute";
div1.style.left = x;
div1.style.top = y;
img = document.createElement ('img');
img.src = 'traffic_icons/traffic-05.gif';
div1.appendChild(img);
ctr.appendChild(div1);
cnt++;
if (cnt == 169) {
pex.stop();
deleteIcons();
}
}, 0.1);
}
function deleteIcons() {
var ctr = document.getElementById("container");
var node = "";
var id = "";
for (var k = 0; k < 13; k++) {
for (var i = 0; i < 13; i++) {
id = 'img_' + k.toString() + i.toString();
node = document.getElementById(id);
ctr.removeChild(node);
}
}
addIcons();
}
</script>
</head>
<body>
<div id="container"></div>
<button onclick="addIcons();" style="position:absolute;left:780px;top:20px">Load Images</button>
<button onclick="deleteIcons();" style="position:absolute;left:780px;top:100px">Delete Images</button>
</body>
</html>
</pre>