Can you stop an

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

You then set them all to be

    .img{visibility:hidden;} 

this will prevent them from making an http request but still preserves their size and spacing in the document preventing any redraws.

then when you want to show your hidden images (for instance the ones in view) you add a class to the surrounding html element and in your css tell this to be

    .show .img {visibility:visible;}

That should do it, Holmes.

Answer 3

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/

Answer 4

Place this at the end of your style sheet:

* img { display: none !important; }

Answer 5

You can PRELOAD images using CSS only, but not actually delay the loading of images using CSS only.

This can, however, be done easily using something like jQuery Lazy Loader, which is MUCH easier than trying to do it by hand.