nasty nasty - 1 year ago 53
CSS Question

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

Every responsive website development tutorial recommends using the

CSS property to hide content from loading on mobile browsers so the website loads faster. Is it true? Does
not load the images or does it still load the content on mobile browser? If so is there a way to not load the unnecessary content on mobile browsers?

Answer Source

Those images are loaded. The browser, due to the possibility of a script dynamically checking an element of the DOM, doesn't optimize elements (or elements content) away.

You may check it there :

The image has a display:none style but its size is read by the script. You could also have checked it by looking at the "network" tab of your browser's developer tools.

Note that if the browser is on a small CPU computer, not having to render the image (and layout the page) will make the whole rendering operation faster but I doubt this is something that really makes sense today.

If you want to prevent the image from loading you may simply not add the IMG element to your document (or set the IMG src attribute to "data:" or "about:blank").


Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it's not useful.