4

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?

Maxime Helen
  • 1,382
  • 7
  • 16

1 Answers1

1

So I found this interesting because I didn't know about that. To conclude the image won't load if the item or one of its parents settings is display: none. Is it because browsers get smarter? I don't think so. I tried the following:

#test1 {
    display: none;
}
<div id="test1">
   <img src="http://www.dumpaday.com/wp-content/uploads/2017/01/random-pictures-116.jpg"/>
</div>

In the Network tab of the developer-tools you can see that the image gets loaded. So it differs from your example. My thought is that display: none does not draw the element (fact) and so no style will be applied to itself or one of its childs (thought). Basically background-image: url('...'); won't be executed because there is no need in applying the style to this element because it won't draw anyway.

I hope this helped you understand :)

Tom Siegel
  • 236
  • 1
  • 7
  • So as the `img` tag exists in the HTML it will be loaded but, like you said, the background-image won't as there's no need for it. Makes sense – Daniel_Knights Aug 08 '20 at 11:15
  • 1
    Excactly. Because css is styling and why should the browser style a element that won't be rendered. – Tom Siegel Aug 08 '20 at 11:21
  • I am still lost `display: none` loads the background image, as the previous quiz problem and your snippet say, but not in the example above with child `visibility: hidden` element. How come? – Maxime Helen Aug 08 '20 at 23:53
  • @MaximeHelen It has nothing to do with `visibility: hidden`. If you want to load a image as background on a element which you can do by using `background-image: url('some-url')` then the image won't load if its or some of its parents has `display: none`. If you use the ``it will load. The reason is that the browser only applies css or simply style to elements that render. An element with `display: none` won't render, so the image does not load if you use `background-image`. But the `` will always load the image because thats the behavior of that element. :) – Tom Siegel Aug 10 '20 at 07:55
  • "An element with display: none won't render, so the image does not load if you use background-image", have you ran above script with network tab opened? – Maxime Helen Aug 10 '20 at 08:00
  • Ok I have re-read everything. Is the rule of thumb here the following: "`display: none` element will never make its descendants to render, so browsers won't bother loading eventual CSS imports from these children?" – Maxime Helen Aug 10 '20 at 08:12
  • @MaximeHelen Yes I did test it with network tab opened. Yes thats correct. – Tom Siegel Aug 10 '20 at 12:06