title: Memory leak in javascript when using new Image()
body: <p>I seem to have a memory leak, caused by using the 'new Image()' in a javascript script. If I watch the used physical memory in the windows resource monitor, i get the expected increase in memory used when I load the page because it loads some quite large images using as follows:</p>
  
  <pre><code>var imgObjs = [];
  
  // in for loop i = 0, 1, 2...
  imgObjs[i] = new Image();
  imgObjs[i].onload = function(event) {
      // image loaded
  }
  imgObjs[this.img_src].src = this.img_src;
  </code></pre>
  
  <p>I would have though that when the page is navigated away from this would automatically destroy the references and free up the memory, but this doesn't seem to be the case. Instead, i navigate away and then go back to the page only the find the memory ramp up even more as it loads the images again without ever freeing up the previously allocated memory. I have tried manually removing references by putting code in the unload event to do this but it doesn't seem to make any difference. The variables were all initially declared with 'var':</p>
  
  <pre><code>// allow garbage collection by removing references
  $(window).unload(function() {
      for(var i in imgObjs) {
      imgObjs[i] = null;
      delete imgObjs[i];
  }
  delete imgObjs
  
  // delete other variables that reference the images
  });
  </code></pre>
  
  <p>does anyone have any pointers as to where I'm going wrong here? I thought the problem might be to do with circular references as i have built a list class where each item contains a reference to the previous and next image, but i have deeted these as follows:</p>
  
  <pre><code>delete galleries[i].pictures.Items[j].prev;
  delete galleries[i].pictures.Items[j].next;
  </code></pre>