Copy link to clipboard
Copied
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?
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).
Copy link to clipboard
Copied
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).