CODEWITHSUNDEEP
javascriptgoogle-chromedommemory-management
Skarlinski
Skarlinski

Reputation: 2479

How to clear images from memory - after removing from DOM

I have javascript which creates dozens of <div> elements loading images with background-image:url(http://differentDomain.com/someImage.jpg)

They are all appended into of <div id = "container">

After The images are displayed on screen, and a css animation is completed, I remove container with:

var c = document.getElementById('container')
c.parentNode.removeChild(c);

After removing that I get a new set of images, create a new container and start the process again.

Issue is - after removing the container, page does not clear the memory, and continues to swell in memory indefinetly - in the image, the memory has swollen after a few iterations. memory is not cleared

Is there a more optimal way to remove from DOM? Could this be connected to using a css animation on images?

Upvotes: 3

Views: 1627

Answers (1)

Rob
Rob

Reputation: 15160

As your data shows, the images are in the browser cache and the DOM does not contain images. That's not what it does. Probably you implement caching on your web site. The only way to remove those from memory is to just not serve the images as cachable in the first place and let the browser remove them on its own which the browser and, possibly, the OS will do.

In the comments, @Jacque brings up an interesting point about references which might be an issue to think about.

Upvotes: 1

Related Questions