8

I would like to know if it is possible to unload an image from an HTML page and free its memory occupation with some Javascript instructions. Say an image is already displayed on the screen. Say I need to unload it to save memory (reason is not relevant here). Can I do it with Javascript?

tshepang
  • 12,111
  • 21
  • 91
  • 136
P5music
  • 3,197
  • 2
  • 32
  • 81
  • 5
    You can remove the image from DOM tree but its removal from memory is only up to your browser. – duri Mar 11 '12 at 09:34
  • 1
    As a follow up to @duri, browsers will garbage collect unused assets and free up memory eventually, although there is no API for that level of control from the user's perspective – jlb Mar 11 '12 at 09:43
  • 2
    you might want to make a testcase with a huge picture and watch the browser-memoryconsumption when removing it. Let me know, how browsers react;) – Christoph Mar 11 '12 at 10:07

3 Answers3

8

The comments on your question are correct, you can remove it from the DOM, but the browser will clear it from memory when it decides it's good and ready.

To clear it from the DOM, you would do something like this:

var badImage = document.querySelector("img#idOfImage"); 
//or "img[href='nameofimagefile.jpeg']" 
//whatever you need to do to get the right element
//then, remove it:

badImage.parentElement.removeChild(badImage);
JKing
  • 807
  • 5
  • 14
3
$('#myDiv').remove();

or

function removeElement(divNum) {
    var d = document.getElementById('myDiv');
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
}

Would remove it from the DOM however it won't free up any memory, or bandwidth or http requests...so performance wise it won't make much of a difference (not taking rendering into account).

However I believe if the image is removed from the DOM the memory it uses will eventually be managed and removed by the browser (garbage collection).

So in short no I don't think there is a specific way to remove it from memory because that is a browser-level concern..

Greg
  • 31,180
  • 18
  • 65
  • 85
1

You can free memory of an img element by assigning the src attribute to a 1x1 pixel before removing it.

const imgElement = document.querySelector(selector);
imgElement.setAttribute('src', '/images/pixel.gif');
imgElement.parentElement.removeChild(imgElement);
Shogo Yahagi
  • 141
  • 1
  • 2
  • very close to the already accepted answer as a late answer, consider whether this will help OP. – Matt Pengelly Mar 19 '19 at 19:03
  • I just found this answer and thought it was useful. The accepted answer only removes the `` element from the DOM. Shogo's answer does that too, but more importantly, makes an attempt to actually remove the image from browser memory (as the OP requested) by defining a new image source. If you just remove the element from the DOM, it still exists in the global scope, with the same source image (so browser will likely retain it in memory) - for instance, end the accepted answer with `document.body.appendChild(badImage);` and the image will come right back (at the bottom of the page). – tlong314 Mar 18 '20 at 21:19