(CSS) Does 'display:none' still load associated images and just not display them, or do they not get loaded at all?

Report · Jan 04, 2019

Let me be even more specific : Say I have half-a-dozen DIVs nested inside one another, and each has a different background image; then I will have 6 images to load... but what happens if the outer DIV - and only the outer div - is set to display:none?

All the child DIVs would still be there in the HTML - and their display is visible - but their container would have its display set to none... are those 6 images still being loaded in the background, in this context?

Or just the 5 inner ones?
(even though we can't see them and the bandwidth is wasted)

Or none?

(ie, if the container is set to display:none, then nothing inside gets processed, and nothing gets loaded)

Thanks!

PS: Could this behavior be different from browser to browser?

Report · Jan 04, 2019

Your answer is here:

https://csswizardry.com/2018/06/image-inconsistencies-how-and-when-browsers-download-images/

The article is in two sections : background images and embedded image. Scroll down the page to the <img /> section.

To summarize: Images set to display none are in fact downloaded, with the exception of some Firefox browsers, where the fact that the image is skipped is unexpected (a bug).