Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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;
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’sbackground-imageproperty. 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.