Latest TweetsVerify any search engine or visitor via CLI Forward-Reverse Lookup perishablepress.com/cli-forwar…
Perishable Press

CSS Throwdown: Preload Images without JavaScript

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.. (only two 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 = Web Developer. Security Specialist. WordPress Buff.
Archives
68 responses
  1. Jeff Starr

    @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 December 1, 2008 @ 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

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

    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 March 16, 2009 @ 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

    @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

    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 ]