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="http://perishablepress.com/image-01.png" width="1" height="1" alt="Image 01" />
<img src="http://perishablepress.com/image-01.png" width="1" height="1" alt="Image 02" />
<img src="http://perishablepress.com/image-01.png" width="1" height="1" alt="Image 03" />
</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
- Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom
- Crazy CSS Underline Effects
- Preloading Images with CSS and JavaScript
- Keep it Dark: Hiding and Filtering CSS
- Industrial-Strength Spamless Email Links
- Maximum and Minimum Height and Width in Internet Explorer
- Focus on the Details: Optimizing Images for Humans and Machines
About this article
This is article #373, posted by Perishable on Sunday, July 22, 2007 @ 03:43pm. Categorized as Presentation, and tagged with css, images, javascript, notes, optimize, tips, tricks. Updated on February 04, 2008. Visited 20569 times. 24 Responses »
Bookmark • Trackback • Comment • Subscribe • Explore
« Wrapping Your Head around Downlevel Conditional Comments • Up • Permanently Redirect a Specific IP Request for a Single Page via htaccess »
1 • July 23, 2007 at 7:01 am — Arjan Eising says:
This will not work as you expect…
The images are loaded, but that is because they are in the XHTML code.
The CSS does not apply any background to the
div-element, because you ‘overwrite’ the background with an empty one.