What browsers download hidden images

问题

<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

回答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).

回答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 :-)

来源：https://stackoverflow.com/questions/8971312/what-browsers-download-hidden-images