0

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>

2 Answers 2

1

You could try refreshing the images by modifying the image URL dynamically, like this:

var imageRefreshCounter = 0;

function refreshIcons() {
            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);        
                    node.src = node.src + "?" + imageRefreshCounter++;                   
                }
            }
            addIcons();
        }
0

You should upgrade to 1.6.1, which fixes some of the leaks in Prototype.js itself.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.