Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

CSS Throwdown: Preload Images without JavaScript

[ 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="" />

..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 = Designer. Developer. Producer. Writer. Editor. Etc.
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »

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

  1. David Bowman 2008/05/26 2:24 pm

    pretty crappy to post a bunch of code that you didn’t even test before you spewed it out onto the internets.

    why do you have to position the DIV off the screen? it’s already hidden with CSS. it’s never, ever going to be visible unless CSS is disabled or unsupported.

  2. David Bowman 2008/05/26 2:29 pm

    yeah, i just tested it out… all you have to do is hide the DIV that contains the preloaded images using “display: none” and the problem is solved. it doesn’t require positioning, overflow, height/width properties. just one line of CSS. your solution is major overkill.

  3. David Bowman 2008/05/26 2:36 pm

    just read through the comments above.

    “A very elegant improvement indeed, Duarte!”

    why don’t you just delete this page or take down your bloated code? you just didn’t know enough about CSS to realize that what you posted to being with was totally ridiculous.

  4. Perishable 2008/05/26 2:40 pm

    Hi David, thanks for the feedback. I appreciate your efforts to improve this technique. Rest assured, I am no expert in CSS, but do enjoy helping others with discoveries, tricks, and other bits of information. At the time of its original posting, this article represented my understanding of a way to preload images without using JavaScript. Since then, several people have helped improve the technique and contributed to the conversation in a positive way. I apologize for any frustration at my apparent lack of CSS knowledge. One of the reasons I enjoy sharing my ideas is to watch as they are used and improved upon by others.

  5. 2 David: good idea !


    img.preload { display: none; }


    <img src="https://perishablepress.com/image-01.png" alt="" class="preload" />
    <img src="https://perishablepress.com/image-02.png" alt="" class="preload" />

  6. Worked excellent for my project after Javascript preload methods failed with Safari (Mac).
    Thanks for your efforts!

  7. My pleasure, beenee — thanks for the feedback :)

  8. SneakyWho_am_i 2008/06/24 1:55 pm

    For me, display:none broke it. I don’t think that I would use this technique in production for semantic reasons, but I have been doing it in testing and as long as I DON’T display:none it, it works fine. I can’t tell you which browser didn’t like it being invisible that way though. May have been Firefox 3.

    Some simple tests though; use the “preloaded” images (on an empty cache of course) as cursors on hover, or reveal them on activation of a link (in a background tab).

    Related: We’ve found that if you display:none; a swf movie that you’ve embedded with x/html, that movie becomes totally silent. Never thought to check whether it actually loads or not, but to hide flash you have to move it offscreen.

    I’m not a fan of people who hide anything that makes a horrible noise on the internet though, I have my own music playing when I’m working, thank you very much, jerks (not you, them)

    Anyway, I HOPE that I’ve not talked a lot of rubbish just now.

  9. Perishable 2008/06/25 9:32 am

    @SneakyWho_am_i: absolutely not a lot of rubbish there, but some interesting information that will inevitably lead to more testing and experimentation. I am currently baffled as to why Flash movies would behave that way when preloaded using display:none; — sounds like a bug to me! Thanks for the information! :)

  10. Sunil Gupta 2008/07/06 2:52 pm

    Hi walrus,

    I am done with the instructions that you mentioned. But nothing is displaying in the browser

  11. Ah, this trick is pretty sneaky, if it works I like it..

  12. It should be noted that if you are preloading images in CSS at the bottom of your page, that you set the ALT tag as blank alt=”” so that they don’t appear for anyone using text only or screen reader browsers. Otherwise, at the bottom of their page they’re going to see a massive list of images “Image 1”, “Image 2” that are completely irrelevant.

    If they are for preloading, you don’t want them to appear as part of the website.

    Also… instead of “display:none” … try “visibility:hidden”.
    If the container is 1px by 1px it doesn’t really matter if it takes up physical space.

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Banhammer: Protect your WordPress site against threats.
Crazy that we’re almost halfway thru 2024.
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.