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 = Designer. Developer. Producer. Writer. Editor. Etc.

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

Jeff Starr 2008/11/16 4:11 pm • Post Author

@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!

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?

Mike 2008/12/16 5:48 pm

@David Bowman

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

Jeff Starr 2008/12/17 5:21 pm • Post Author

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

Adam 2008/12/18 9:02 am

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

Jeff Starr 2009/01/01 11:06 am • Post Author

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! :)

Finn 2009/01/09 4:41 am

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

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!

Nic 2009/04/09 6:21 pm

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).

Jeff Starr 2009/04/12 9:04 am • Post Author

@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.

Nic 2009/04/14 2:54 pm

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

Jeff Starr 2009/04/14 3:04 pm • Post Author

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.

Jeff Starr 2008/11/16 4:11 pm • Post Author

@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!
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?
Mike 2008/12/16 5:48 pm

@David Bowman

Man, you couldn’t have been much more of a jerk about it, could you?
Jeff Starr 2008/12/17 5:21 pm • Post Author

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

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
Jeff Starr 2009/01/01 11:06 am • Post Author

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! :)
Finn 2009/01/09 4:41 am

This is excellent, I use it to load my Virtual Image Tour in WordPress. Thank You…
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!
Nic 2009/04/09 6:21 pm

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).
Jeff Starr 2009/04/12 9:04 am • Post Author

@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.
Nic 2009/04/14 2:54 pm

Sure but- why not just include the images in the page- where they belong?
Jeff Starr 2009/04/14 3:04 pm • Post Author

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.

« Previous Comments • 123456 • Newer Comments »