Highlighted

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

Contributor ,
Jan 04, 2019

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

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Contributor ,
Jan 04, 2019

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

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 04, 2019 0
Mentor ,
Jan 04, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 1