CSS Throwdown: Preload Images without JavaScript
![[ Preload Images with CSS ]](https://perishablepress.com/wp/wp-content/images/2007/misc-chunks/preload-images-css.jpg)
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 = Fullstack Developer. Book Author. Teacher. Human Being.
68 responses to “CSS Throwdown: Preload Images without JavaScript”
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.
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.
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.
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.
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" />Worked excellent for my project after Javascript preload methods failed with Safari (Mac).
Thanks for your efforts!
b.
My pleasure, beenee — thanks for the feedback :)
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.
@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! :)Hi walrus,
I am done with the instructions that you mentioned. But nothing is displaying in the browser
Ah, this trick is pretty sneaky, if it works I like it..
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.