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="http://perishablepress.com/image-01.png" width="1" height="1" alt="" />
   <img src="http://perishablepress.com/image-02.png" width="1" height="1" alt="" />
   <img src="http://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!!

Related articles

• A Way to Preload Images without JavaScript that is SO Much Better
• 3 Ways to Preload Images with CSS, JavaScript, or Ajax
• Pure CSS: Better Image Preloading without JavaScript
• Preloading Images with CSS and JavaScript
• Better Image Caching with CSS
• Drop-Dead Easy Random Images via PHP
• Better Image Preloading with CSS3