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”

Perishable 2008/02/17 9:21 am • Post Author

Hi Nanda, thanks for continuing the conversation ;) Reading your comment, I am assuming that WordPress ate the “<div>” placed directly before the “s” in your first sentence. If so, I would argue that an empty <div> (or any other element) qualifies as “non-semantic” markup, which should also be avoided within a strictly web-standards context. Admittedly, an empty element is an improvement over one that is filled with images, however, I think that your second, CSS-only method serves as a far better solution overall. Do you know if there are any browsers for which the CSS-only technique does not work?

Nanda 2008/02/17 9:38 am

The CSS only method is certainly better, it will work in any browser that supports background images, so far I’ve had no problems in any modern browsers (including IE 6).

Perishable 2008/02/17 3:26 pm • Post Author

Excellent — thanks for sharing this method with us. I am going to experiment a bit and perhaps check a few crusty browsers for support. After spending some quality time with the technique, I will update this article and post an “new and improved” version! Thanks again for your help! :)

Duarte 2008/05/02 2:36 pm

Hello Perishable.
Interesting method, but won’t it work if you just use display:none;?

Perishable 2008/05/04 7:17 am • Post Author

Hi Duarte,

Yes, I think this method will work when using display:none;. I have yet to test it, but logically it makes sense. Such images are still loaded by the browser, yet not displayed to the user. Thus, the images will have been “preloaded”. A very elegant improvement indeed, Duarte — thank you! ;)

Duarte 2008/05/05 2:22 pm

Glad i could help Perishable, btw congratulations on the great website and articles you provide, i have learned a lot. Thank you.

Vilmer 2008/05/07 5:30 am

Thank you for this very useful post. I make ‘360 degrees virtual tours’ and had the problem that visitors had to wait for a more than 1 megabyte image to load after a change of scene. Now I have implemented your code, with the display:none command, without using an external css file, and the images load in a few seconds now!
See the source of the link to one of my tours above.

Thanx! And pls let me know if it works on all browsers, since I only have iexplorer 7 and the latest firefox..

Perishable 2008/05/07 8:56 am • Post Author

Sounds great, Vilmer — thanks for the feedback concerning your very practical application of the CSS-preloading technique. As for the cross-compatibility, I have not tested every browser on earth, but can definitely reassure you that the image-preloading method will work for a vast majority of your visitors. I think just about any modern browser (e.g., Firefox, Opera, IE7+, Safari, etc.) supports it.

zjk 2008/05/13 12:40 pm

the best way i found actually is display:none; of course you should put a .htaccess file with these lines in your media online directory:

ExpiresActive on
ExpiresDefault "access plus 30 minutes"

(ref:http://httpd.apache.org/docs/2.0/mod/mod_expires.html)

now i try to cleanup some, the whole animation loading as long as it sometimes look a bit and rough ^^

anyway with an infinite and unpredictable number of image to preload, i suggest to improve a bit this functionnality… (i’m actually trying to find how to catch an event like “all images are preload, display:block; the whole thing”)

if you have ideas…

Perishable 2008/05/13 4:12 pm • Post Author

Careful with that htaccess, zjk! Setting default content expiration is great, so long as you specify expiration times for specific file types (e.g., .js, .css, .html, etc.) as needed. Depending on your needs, a default expiration value of 30 minutes may work fine for, say, images and flash files, but you may want to optimize performance by handling other file types differently.

John 2008/05/14 2:46 am

For hiding images it is possible to use z-index

Perishable 2008/05/14 8:29 am • Post Author

Ah yes, good call — thanks for the reminder :)

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

Perishable 2008/02/17 9:21 am • Post Author

Hi Nanda, thanks for continuing the conversation ;) Reading your comment, I am assuming that WordPress ate the “<div>” placed directly before the “s” in your first sentence. If so, I would argue that an empty <div> (or any other element) qualifies as “non-semantic” markup, which should also be avoided within a strictly web-standards context. Admittedly, an empty element is an improvement over one that is filled with images, however, I think that your second, CSS-only method serves as a far better solution overall. Do you know if there are any browsers for which the CSS-only technique does not work?
Nanda 2008/02/17 9:38 am

The CSS only method is certainly better, it will work in any browser that supports background images, so far I’ve had no problems in any modern browsers (including IE 6).
Perishable 2008/02/17 3:26 pm • Post Author

Excellent — thanks for sharing this method with us. I am going to experiment a bit and perhaps check a few crusty browsers for support. After spending some quality time with the technique, I will update this article and post an “new and improved” version! Thanks again for your help! :)
Duarte 2008/05/02 2:36 pm

Hello Perishable.
Interesting method, but won’t it work if you just use display:none;?
Perishable 2008/05/04 7:17 am • Post Author

Hi Duarte,

Yes, I think this method will work when using display:none;. I have yet to test it, but logically it makes sense. Such images are still loaded by the browser, yet not displayed to the user. Thus, the images will have been “preloaded”. A very elegant improvement indeed, Duarte — thank you! ;)
Duarte 2008/05/05 2:22 pm

Glad i could help Perishable, btw congratulations on the great website and articles you provide, i have learned a lot. Thank you.
Vilmer 2008/05/07 5:30 am

Thank you for this very useful post. I make ‘360 degrees virtual tours’ and had the problem that visitors had to wait for a more than 1 megabyte image to load after a change of scene. Now I have implemented your code, with the display:none command, without using an external css file, and the images load in a few seconds now!
See the source of the link to one of my tours above.

Thanx! And pls let me know if it works on all browsers, since I only have iexplorer 7 and the latest firefox..
Perishable 2008/05/07 8:56 am • Post Author

Sounds great, Vilmer — thanks for the feedback concerning your very practical application of the CSS-preloading technique. As for the cross-compatibility, I have not tested every browser on earth, but can definitely reassure you that the image-preloading method will work for a vast majority of your visitors. I think just about any modern browser (e.g., Firefox, Opera, IE7+, Safari, etc.) supports it.
zjk 2008/05/13 12:40 pm

the best way i found actually is display:none; of course you should put a .htaccess file with these lines in your media online directory:

ExpiresActive on
ExpiresDefault "access plus 30 minutes"

(ref:http://httpd.apache.org/docs/2.0/mod/mod_expires.html)

now i try to cleanup some, the whole animation loading as long as it sometimes look a bit and rough ^^

anyway with an infinite and unpredictable number of image to preload, i suggest to improve a bit this functionnality… (i’m actually trying to find how to catch an event like “all images are preload, display:block; the whole thing”)

if you have ideas…
Perishable 2008/05/13 4:12 pm • Post Author

Careful with that htaccess, zjk! Setting default content expiration is great, so long as you specify expiration times for specific file types (e.g., .js, .css, .html, etc.) as needed. Depending on your needs, a default expiration value of 30 minutes may work fine for, say, images and flash files, but you may want to optimize performance by handling other file types differently.
John 2008/05/14 2:46 am

For hiding images it is possible to use z-index
Perishable 2008/05/14 8:29 am • Post Author

Ah yes, good call — thanks for the reminder :)

« Previous Comments • 1234…6 • Newer Comments »