Can you stop an <img> tag from loading its image using CSS?

Question

Is there any way to stop an <img> tag loading its image by just using CSS? I would like to avoid using JavaScript.

This doesn't seem to work (Firebug still shows the images loading):

display: none;
visibility: hidden;

Answer 1

No — CSS only tells browsers what content should look like, it doesn’t specify loading behaviour.

The best you could do that involves CSS is to remove the <img> tag from your HTML, and replace it with an element that shows an image via CSS’s background-image property. Then the image is controlled more in the CSS than the HTML.

I still don’t think you can guarantee when the image will be downloaded though — I seem to remember early versions of Safari would download images referenced in a stylesheet even if they weren’t used on the current page? Using JavaScript (to create the <img> tag when you want the image loaded) is probably the most reliable way of controlling the timing of images getting loaded.

However, have a look at the page linked to from @Stackle’s answer to see the loading behaviour of browsers in April 2012 with different bits of CSS that hide elements with background images.

Answer 2

This is an old question but today we can do it by using css only.

The answer is Yes, but not support on some browser. See this http://timkadlec.com/2012/04/media-query-asset-downloading-results/