The normal way of preloading images is by using JavaScript to do the job.  In the lieu of Firefox and it's NoScript type extensions I have stopped relying so heavily on JavaScript in my pages.  So where does that leave us when it comes to preloading images?

In steps CSS.  Most of the time when I want to preload and image it is for hover menu's or rollover type images that I know the user most likely won't hover over right away.  In this case I want the rollover's to work right away.  My next example won't please some of the real hard core standards people because it adds a little markup to the page, but in my opinion it is better than and less markup than the common JavaScript usually used to preload images.

At the bottom of the page before the closing body tag I add a preload DIV.  I assign the class of preload to the div and then let CSS handle the rest.  (you will also have to add a DIV element inside the preload DIV for every image you want to preload.  Hopefully in CSS  3 we can assign multiple images to the background of one element (DIV) but for now this works.

The CSS for this is

.preload
{
    position: absolute;
    width: 0px;
    height: 0px;
    margin-left: -9999px;
    background: url(yourimagehere.jpg) no-repeat;
}

Now the DIV elements inside the preload DIV only have to have the background set because they are going to go to the left along with the preload div. 

The reason I didn't do a display: none or visibility: hidden was because Opera and Safari are smart enough not to waste resources loading your images because it can see by the way you did the CSS that you don't want it to display.

This has worked great for me in the past and I am continuing to use it in the future.  I am sure some of you have arguments against it, and I would love to hear your arguments.  Please feel free to post a comment here. 

I am going to start a page by page guide for these type of things in the future that will allow users to search and find help while they create their own web sites.  For now you will have to search the blog to find good information.

Thanks for your time
~Mike