Here are various JavaScript methods for preloading images you will be using in a webpage. Its up to you to decide when the right time to use it.

Code Example: Single Image
 
    var homeRollOver = new Image(250,250);
    homeRollOver.src = "/images/home_hover.jpg"
 

Code Example: Multi-Image

    var imageDir = "/images/";
    var images = new Array;

    images[0] = new Array("home_hover.jpg",250,250);
    images[1] = new Array("blocked.jpg",64,64);
    images[2] = new Array("sun_icon.jpg",128,128);

    var imageCache = loadImages(imageDir,imageCache);

    function loadImages(path,images) {
        var imageCache = new Array;
        for (var i=0; i<images.length; i++){
            imageCache[i] = new Image(images[i][1],images[i][2]);
            imageCache[i].src = (path + images[i][0]);
        }
        return (imageCache);
    }