There are several ways to preload images, but the most effective way is also the easiest. Simply include those images in your html with a height and width of 1 pixel apiece. This forces the browser to download the picture, but due to the size most people wouldn't notice them at all. As an example;
<img src="blah.jpg" style="height: 1px; width: 1px;">
And that's basically all that's to it. Just put a series of these, with your different images, at the bottom of your index page, or in your navigation frame or something. The browser takes care of the rest. Once those images are downloaded, another call for that image by your web page (at actual size) will cause the browser to pull it out of it's cache instead of redownloading it. For really large images, this is great even if you have a broadband internet connection, but primarily this technique is for dialup users.
var image1 = new Image();
image1.src = "image1.gif";
var image2 = new Image();
image2.src = "image2.gif";
These are the main ways in which you can preload images. If you have images that take a considerable amount of time to download, it's also possible to display a "loading" page until everything on the page is fully downloaded. However, in the world of short attention spans, this is usually just good for making people go somewhere else, so I would recommend against it.