Is the element with a display: none installed in css still loaded by the browser?

Will the browser download the image?

<img src="/myimage.jpg" style="display:none;" /> 
+7
html css
source share
4 answers

Yes, at least according to the Net console in Firebug.

As stated by thethimble , CSS is a presentation layer and affects rendering, not actual page processing.

It would not be beyond the capabilities of some browsers, especially mobile ones, to potentially not load them in an attempt to optimize performance.

+4
source share

Yes. Rendering an image has nothing to do with loading the image.

Edit:
Try using Chrome or Firefox to check page resource time. Please note that all images are uploaded. Even those for which a display style is not set.

+1
source share

Yes.

However, as a side element, some browsers will not load images with attributes width and height 0. It is not possible to find the source code now and just test Firefox and Safari, and they download it. Must be IE, can anyone check me out? Thanks.

If in doubt, sniff the line or use a special tool for the browser (Firebug for Firefox, Web Inspector for Webkit, etc.)

+1
source share

Quirks mode: images and display: no

When an image has display: none or is inside an element with display:none , the browser may refuse to load the image as long as display set to a different value.

Only Opera loads the image when switching display to block . All other browsers download immediately.

0
source share

All Articles