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="" />
</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 = Web Developer. Book Author. Secretly Important.
SAC Pro: Unlimited chats.

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

  1. Jeff Starr 2008/11/16 4:11 pm

    @Adam: Thanks for the tips! Adding empty alt attributes to keep the images from displaying in text-only browsers is an excellent idea. Also, is there a reason why one would choose display:none; over visibility:hidden;? If I remember correctly, visibility:hidden; prevents the content from showing, but doesn’t remove other properties such as padding, margins, and widths.. if so, then I think I get what you are saying in that last sentence. Thanks again!

  2. Timothy Stone 2008/12/01 12:20 am

    Bowman never struck me as a complete ass when I met him. Looks like I was wrong. What’s with that triad?

  3. @David Bowman

    Man, you couldn’t have been much more of a jerk about it, could you?

  4. Jeff Starr 2008/12/17 5:21 pm

    <aside>I am thinking that this thread has become a prime example of why people should always “think” before they leave a comment..</aside>

  5. Me again, thought I’d add another suggesting for people regarding preloading images (with the assumtion they are for hover effects).

    You could use the “sprite” method (something I’ve been playing with).
    For example, if you have a bunch of buttons and they all have a hover effect you simply join the two images together to make one image.

    So lets say you have a button that is 100px by 50px.
    Join it with the other graphic to make one image that would become 200px x 50px. (Buttons are side by side in the graphic).

    Then.. in your CSS you do this:
    ============================
    a {
         display:block;
         width:100px;
         height:50px;
         background-image:url('mysprite.gif');
         background-repeat:no-repeat;
         background-position:0px 0px;
    }
    a:hover {
         background-position: -100px 0px;
    }

    So basically all you are doing is repositioning the background image so that the hover part is now visible.

    It also means, you dont have any additional stuff to do to preload anything because the graphic has been loaded fully.

    Hope that helps someone :)

    Adam

  6. Definitely cool, Adam! Thank you so much for sharing this technique with the readers here at Perishable Press. It is very much appreciated. Happy New Year! :)

  7. This is excellent, I use it to load my Virtual Image Tour in WordPress. Thank You…

  8. martin white 2009/03/16 6:10 am

    Well done Adam and thank you!

    I’ve been making a navigation list with 4 states for each link – the sprite method has reduced my link images from 28 to 7 – nice!

    This is by far the slickest method which doesn’t require any surplus markup.

    Keepin’ it nice n tidy!

  9. Just curious, what applications does this have? The only thing I can think is for CSS image rollovers- in which case sprites are typically the best solution (and leaves no extraneous markup).

  10. Jeff Starr 2009/04/12 9:04 am

    @Nic: I have seen image-preloading techniques used for slideshows, shopping carts, portfolios, and for design-related images in general. Anywhere you are using lots of images and want them to appear with no delay, preloading is a helpful tool.

  11. Sure but- why not just include the images in the page- where they belong?

  12. Jeff Starr 2009/04/14 3:04 pm

    Are you asking about why designers use preloading methods? If so, it has to do with ensuring that graphics are displayed instantaneously, without any delay otherwise caused by preloading. This is difficult to achieve by simply placing the images “in the page.” I guess I’m not sure what you are driving at here, but let me know if you are still confused about it.

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 »
The Tao of WordPress: Master the art of WordPress.
Thoughts
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.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.