Using CSS2′s :after notation, we can preload images without unnecessary markup or JavaScript. Example:

#wrapper:after {
	content:url(/images/black-dropdown-bottom.png);
	display:none;
}

This will preload the image set as the “content” after the element, and using display:none we don’t have to worry about it being rendered. Just a nifty trick to preload images without JavaScript or duplicating image tags inside a div that is not displayed. Of course, this only works on those browsers that support :after, so poor IE6 & IE7 will have to deal without preloaded images.

Leave a Reply

Using Gravatars in the comments - get your own and be recognized!

XHTML: These are some of the tags you can use: <a href=""> <b> <blockquote> <code> <em> <i> <strike> <strong>