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

Question

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?

ALsp · Accepted Answer

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded