Is there any way to stop an tag loading its image by just using CSS? I would like to avoid using JavaScript.
This doesn\'t seem to work (Firebu
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 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 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.