What browsers download hidden images

Question

<style type="text/css">
    .hidden-image-container {
        display: none;
    }
</style>
<div class="hidden-image-container">
   <img src="lulcats.png" />
</div>

I'm mainly interested in what mobile browsers make the optimization of not downloading an image that's in a hidden container.

This would allow me to signficantly reduce initial download time.

Related reference question about loading images across devices

Answer 1

Someone has tested this before:

http://www.w3.org/2009/03/image-display-none/test.php

Edit:
Looks like the list does not contain many mobile browsers (yet).

Answer 2

I would never call it an optimization for a browser to not download a hidden image. That might have dozens of good reasons and should (and will) still get downloaded by a browser. I don't have some table of numbers or browsers but I'm pretty much sure all mobile browsers will also download such an image as soon as the interpreter spots it.

I'm afraid there is no silver bullet to conditionally load <img> tags with just html/css. Right now you'll need at least a little piece of ecmascript, but as always, I'm very sure the stackoverflow community will correct me if I'm wrong here.

The <img> node has no property like .preventLoad (which would indeed be quite useful). Maybe it's time for a whatwg proposal, I'll join and support it :-)