Question

I can’t wrap my head around this. I have several Divs within a HTML page. Each Div represents a different section and thus contains different images for that section. All the images are referenced from css and displayed/removed using javascript (document.getElementById('DIV').style.display='none/block';).

For the purpose of this example lets say I have 2 divs. Each section Div(Div1 & Div2) would be the parent divs and any Div within those parents will be its child. (DIV1a, DIV2a)

I have found that if Div1 is set using display: block and uses the css Background-image:…. and Div2 is display='none' when I hide Div1 using style.display = 'none'; that it does remove it from the screen and allows me to show Div2..however the background-image is still present in the browser memory.

The interesting thing and which I can’t wrap my head around is if I place the background-img into a child div(div1a) within DIV1 when I use style.display = 'none' for the the Parent DIV1 the child div1a image does get removed from the browser memory when I use style.display = 'none' on the parent DIV1. However I have found this also to be inconsistent….it seems to work on some parent divs and not on others.

As you can probably tell by this point I am heavily confused and really don’t know how to approach this.

Thank you all for your time and thoughts.

Code Example:

When using this method

<div id="Div1">
    content....
</div>

<div id="Div2" style="display: none">
    ...content
</div>

div#Div1{
    background-image: url(images/mybg.png);
    background-repeat: no-repeat;
    width: 480px;
    height: 360px;
}

document.getElementById("Div1").style.display='none';
document.getElementById("Div2").style.display='block';

The image is still present in the resources tab when I execute the above javascript

When using this method:

<div id="Div1">
    <div id="Div1a">
        content....
    </div>
</div>

<div id="Div2" style="display: none">
    content....
</div>

div#Div1a{
    background-image: url(images/mybg.png);
    background-repeat: no-repeat;
    width: 480px;
    height: 360px;
}

document.getElementById("Div1").style.display='none';
document.getElementById("Div2").style.display='block';

The image gets removed from the resources tab when I execute the above javascript…but this effect is inconsistent and doesn’t always work :s

Answer 1

Setting something to display: none does not remove anything from memory in any browser. The entire DOM element is still in the DOM occupying the same amount of memory, it is just marked hidden from view and layout.

If you want to actually remove an element from memory, then you need to physically remove it from the DOM, usually using parent.removeChild(child) AND make sure that there are no references to the DOM element anywhere in your javascript which would keep it from getting garbage collected.

---

Also, I don’t know how you are assessing memory usage in your browser, but most methods will not accurately detect whether a browser has freed a given image or not because the memory may have been freed from an internal pool of memory (available for reuse), but not returned to the OS. Just releasing an image will not necessarily show a reduction in memory usage by the browser. What does show would be highly browser specific and even OS specific and would certainly depend upon exactly what tools you were using to examine memory usage.