CSS Throwdown: Preload Images without JavaScript

♦ Posted by Jeff Starr in CSS, JavaScript

Updated January 30, 2020 • 68 comments

[ Preload Images with CSS ] Clean, easy, effective. You don’t need no stinking JavaScript to preload your images. Nope. Try some tasty CSS and (X)HTML instead! Here’s how to do it with only two easy steps..

Step 1 — Place this in your CSS file:

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

Step 2 — Place this at the bottom of your (X)HTML document:

<div id="preloaded-images">
   <img src="https://perishablepress.com/image-01.png" width="1" height="1" alt="" />
   <img src="https://perishablepress.com/image-02.png" width="1" height="1" alt="" />
   <img src="https://perishablepress.com/image-03.png" width="1" height="1" alt="" />
</div>

..and that’s a wrap! All images are preloaded and ready for calling as you please. Completely valid, standards-compliant image preloading via CSS and (X)HTML!!

About the Author

Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.

68 responses to “CSS Throwdown: Preload Images without JavaScript”

Arjan Eising 2007/07/23 7:01 am

This will not work as you expect…

The images are loaded, but that is because they are in the XHTML code. The CSS does not apply any background to the div-element, because you ‘overwrite’ the background with an empty one.

Perishable 2007/07/23 10:05 am • Post Author

Yes, thank you. I am updating the article with something that actually works ;)

I think the updated code works fine. I tested it in Firefox, Opera, and IE7. Let me know if something goes bonkers..

Mark 2007/07/23 4:36 pm

With this method, a user without CSS or CSS disabled is going to see a series of images at the bottom of the page. Why not do a width="0"/height="0" on each img tag?

Perishable 2007/07/23 6:05 pm • Post Author

Good call, Mark! Anything to enhance usability/accessibility is always welcome. I have updated the (X)HTML code with your suggestions. Thank you for helping to improve the method!

Lee Allen 2007/08/19 2:30 am

Some browsers will not load an image with a width of 0px and height of 0px set as they realise it is not showing. It needs to be at least 1 x 1 px!

Perishable 2007/08/19 8:49 am • Post Author

That makes sense.. Do you happen to know which browsers behave that way? Perhaps I will modify the example..

Lee Allen 2007/09/04 6:24 am

As far as i know its the more recent browsers IE6+ and Firefox 2.0+. I have read about this issue before but have taken it into account rather than testing it.

Perishable 2007/09/04 9:53 pm • Post Author

Okay, I went ahead and changed the code in the post to specify 1×1 image sizes. I think the logic is sound, and until I find time to test and research it myself, I would rather error on the side of caution. Thanks for the heads up!

Marco 2007/11/07 1:37 pm

I don’t know if I think this is absolutely stupid (which it actually is), but on the other hand it’s really genious.

I like fresh ideas like this one, keep it up!

Greetings,
Marco

Nanda 2008/02/12 12:00 pm

Its better to assign background images with css (e.g. with url(‘image.png’) to either empty xhtml elements, or existing ones that don’t need a background image. You can do it this way without adding any extra html code. adding html to a site for this purpose should not be encouraged as it does not follow the semantic standards, it will create problems in certain mobile browsers for instance.

Perishable 2008/02/13 10:58 am • Post Author

All excellent points, Nanda. Thank you for sharing them with us! Do you have any prime examples of which (X)HTML elements would best serve this technique? I can think of a few (e.g., <br />, <hr />, etc.) with which the background images wouldn’t be visible, but perhaps I am overlooking the obvious (again).. ;)

Nanda 2008/02/14 4:38 am

In the past I have just used empty s, unless they have something inside them they will not have any height/width attributes and so will not show they background images. You can also use any existing elements in your code and simply move the background image off screen by setting something like “background: url(image.png) no-repeat left -10000 -10000)”. This way is probably best as it involves no extra code in your xhtml, so keeping the rule of no presentational code.

Comments are closed for this post. Something to add? Let me know.

Arjan Eising 2007/07/23 7:01 am

This will not work as you expect…

The images are loaded, but that is because they are in the XHTML code. The CSS does not apply any background to the div-element, because you ‘overwrite’ the background with an empty one.
Perishable 2007/07/23 10:05 am • Post Author

Yes, thank you. I am updating the article with something that actually works ;)

I think the updated code works fine. I tested it in Firefox, Opera, and IE7. Let me know if something goes bonkers..
Mark 2007/07/23 4:36 pm

With this method, a user without CSS or CSS disabled is going to see a series of images at the bottom of the page. Why not do a width="0"/height="0" on each img tag?
Perishable 2007/07/23 6:05 pm • Post Author

Good call, Mark! Anything to enhance usability/accessibility is always welcome. I have updated the (X)HTML code with your suggestions. Thank you for helping to improve the method!
Lee Allen 2007/08/19 2:30 am

Some browsers will not load an image with a width of 0px and height of 0px set as they realise it is not showing. It needs to be at least 1 x 1 px!
Perishable 2007/08/19 8:49 am • Post Author

That makes sense.. Do you happen to know which browsers behave that way? Perhaps I will modify the example..
Lee Allen 2007/09/04 6:24 am

As far as i know its the more recent browsers IE6+ and Firefox 2.0+. I have read about this issue before but have taken it into account rather than testing it.
Perishable 2007/09/04 9:53 pm • Post Author

Okay, I went ahead and changed the code in the post to specify 1×1 image sizes. I think the logic is sound, and until I find time to test and research it myself, I would rather error on the side of caution. Thanks for the heads up!
Marco 2007/11/07 1:37 pm

I don’t know if I think this is absolutely stupid (which it actually is), but on the other hand it’s really genious.

I like fresh ideas like this one, keep it up!

Greetings,
Marco
Nanda 2008/02/12 12:00 pm

Its better to assign background images with css (e.g. with url(‘image.png’) to either empty xhtml elements, or existing ones that don’t need a background image. You can do it this way without adding any extra html code. adding html to a site for this purpose should not be encouraged as it does not follow the semantic standards, it will create problems in certain mobile browsers for instance.
Perishable 2008/02/13 10:58 am • Post Author

All excellent points, Nanda. Thank you for sharing them with us! Do you have any prime examples of which (X)HTML elements would best serve this technique? I can think of a few (e.g., <br />, <hr />, etc.) with which the background images wouldn’t be visible, but perhaps I am overlooking the obvious (again).. ;)
Nanda 2008/02/14 4:38 am

In the past I have just used empty s, unless they have something inside them they will not have any height/width attributes and so will not show they background images. You can also use any existing elements in your code and simply move the background image off screen by setting something like “background: url(image.png) no-repeat left -10000 -10000)”. This way is probably best as it involves no extra code in your xhtml, so keeping the rule of no presentational code.

123…6 • Newer Comments »