Will the browser still download the image?
<img src="/myimage.jpg" style="display:none;" />
-
Suggest to change the title to "Does an image with display:none set in css still get downloaded by the browser?"onlyurei– onlyurei2014-10-29 20:15:07 +00:00Commented Oct 29, 2014 at 20:15
Add a comment
|
4 Answers
Yes, at least according to the Net console in Firebug.
As stated by thethimble, CSS is the presentation layer and affects rendering, not the actual processing of the page.
It wouldn't be outside the realm of possibility for some browsers, especially mobile, to potentially not download this in an attempt to optimize performance.
2 Comments
Cato Johnston
I thought this was the case, just needed to convince a colleague.
Paul D. Waite
Apparently Opera doesn’t. Test page: quirksmode.org/css/displayimg.html
Yes. The rendering of the image has nothing to do with the downloading of the image.
Edit:
Try using Chrome or Firefox to perform a timing-test of a page's resources. Notice that all images get downloaded. Even ones whose display style is set to none.
Comments
Yes.
However, as a sidenote, some browsers won't download images with width and height attributes of 0. Can't find the source now, and just tested Firefox and Safari and they do download it. Must be IE, can anyone test for me? Thanks.
When in doubt, sniff the line, or use a browser specific tool (Firebug for Firefox, Web Inspector for Webkit, etc)
Comments
Quirks Mode: images and display: none
When image has
display: noneor is inside an element withdisplay:none, the browser may opt not to download the image until thedisplayis set to another value.Only Opera downloads the image when you switch the
displaytoblock. All other browsers download it immediately.
