Css display none

Question

If I have a div with some heavy loading content in it like some large pictures. Will my site load the content of this div if it is set to display none in my stylesheet or will the div and its content be ignored and not loaded?

[you may want to check this browser request trivia game out](http://jakearchibald.github.io/request-quest/). — zzzzBov, Jun 13 '13 at 17:28
possible duplicate of [Does "display:none" prevent an image from loading?](http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading) — cimmanon, Jun 13 '13 at 18:28

score 7 · Accepted Answer · edited Jun 20 '20 at 09:12

As per Request Quest:

Browsers download imagery regardless of parent styles

_{for anyone who can't read the image}

<div style="display: none"><img src="img.png"></div>
Does the above trigger a request for img.png in any of the following:

Chrome, Safari, Firefox, IE

Correct! The request was made in Chrome, Safari, Firefox & IE.

Aha! Yes, browsers download imagery regardless of style, as per the spec.

This behaviour has been the downfall of many JavaScript implementations of adaptive imagery, as the original image gets requested before JavaScript can jump in and alter the src property.

score 2 · Answer 2 · edited May 23 '17 at 11:45

2

It'll be loaded, if you want a lazy load try changing the css background attribute to match another URL, will be loaded then

Does "display:none" prevent an image from loading?

edited May 23 '17 at 11:45

Community

1
1

answered Jun 13 '13 at 17:27

Edorka

1,781
12
24

score 2 · Answer 3 · answered Jun 13 '13 at 17:29

Yes it will still be loaded. The browser will still load the values of any content of a div set to display='none' because it is part of the HTML code.

If you want to avoid loading very large media in the html, you should work with javascript or PHP conditions.

Css display none

3 Answers3