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

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

• javascript
• css
• html

• Please show your example by code. It's easier to understand. – GusDeCooL Commented Sep 6, 2012 at 16:30
• 1 Why do you say the image is removed from browser memory? How are you testing this? – Jeremy J Starcher Commented Sep 6, 2012 at 16:31
• @JeremyJStarcher I am looking in the chrome inspector under the resource tab in document(index.html) > images – Drew Commented Sep 6, 2012 at 16:33
• 1 @Drew As long as there is a link to a resource in your code that had to be loaded at some point, it will show up in the resource tab. This question should probably be closed. – Some Guy Commented Sep 6, 2012 at 16:36
• 1 Jeremy's short answer: The browser does a real good job of managing memory. Unless you are writing an application and accidentally locking up memory in closures, don't worry about it. (IE6 excepted -- that was a whole 'nother kettle of fish.) – Jeremy J Starcher Commented Sep 6, 2012 at 16:39

1 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.