I'm struggling to understand this concept. I have multiple Divs within an HTML page, each representing a different section with unique images referenced from CSS and controlled using JavaScript (
document.getElementById('DIV').style.display='none/block';Let's consider 2 divs for this example: Div1 & Div2 as parent divs, with child divs within them (Div1a, Div2a).
Here's where it gets interesting - when I hide Div1 with display = 'none'; but keep the image background in place, the image still lingers in the browser memory even though Div1 is hidden.
The confusion deepens when I move the background-image to a child div (Div1a) within Div1. In some cases, hiding the parent Div1 does remove the child div's image from the browser memory, while in others, it doesn't. The inconsistency baffles me.
At this point, I am completely lost on how to tackle this issue. Your insights and time are highly appreciated.
Thank you for your patience and suggestions.
Code Example:
With 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 remains in the resources tab after executing the above javascript code.
When trying this approach:
<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 is successfully removed from the resources tab upon executing the javascript code, although this behavior isn't consistent.