Welcome to the new design! Please report any bugs or issues, thanks :)
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="" />
</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!!

Jeff Starr
About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
The Tao of WordPress: Master the art of WordPress.

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. Jeff Starr
    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 !

    CSS:

    img.preload { display: none; }

    HTML:

    <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!
    b.

  7. Jeff Starr

    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. Jeff Starr
    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.
Welcome
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 »
Blackhole Pro: Trap bad bots in a virtual black hole.
Thoughts
Dashlane recently redesigned, stating proudly that they "removed all filigree". They should have kept it, as the app now looks generic and boring.
Working on integration for setaPDF + EDD on the new books subdomain. Good times.
Toggle visibility of hidden files on Mac: Cmd + Shift + .
Great tool for checking browser caching for web pages and all included files.
The new minimalist design styled by 14KB of CSS (uncompressed and un-minified). That covers 850+ posts and pages spanning 15 years of diverse content.
Amazing (and sad) to think that, in the year 2020, Internet Explorer still doesn't support the placeholder attribute, which is supported by all other major browsers.
Finishing up with the latest redesign for Perishable Press! Should be live this week or early next.