I am having a hard time to wrap my head around this quiz question:
On page load, will mypic.jpg
get downloaded by the browser?
#test1 {
display: none;
}
#test2 {
background-image: url('http://www.dumpaday.com/wp-content/uploads/2017/01/random-pictures-116.jpg');
visibility: hidden;
}
<div id="test1">
<span id="test2"></span>
</div>
The answer is no. Why is that? Trying above doesn't load the image. But loading happens when I switch to display: block;
Does that have something with element space to be preserved using hidden visibility?
I am also confused because the previous question says display: none
does load the background image although not in this case with a hidden descendant, and this thread talks about browsers are getting smarter and prevent the loads. So where is the truth?