CODEWITHSUNDEEP
htmlcss
Robin Cox
Robin Cox

Reputation: 1490

Css display none

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?

Upvotes: 3

Views: 884

Answers (3)

zzzzBov
zzzzBov

Reputation: 179046

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.

Upvotes: 7

LAL
LAL

Reputation: 508

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.

Upvotes: 2

Edorka
Edorka

Reputation: 1811

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?

Upvotes: 2

Related Questions