[AndrewGSW]

I might consider pre-loading just a few images at the beginning (script in the head tag) and, after the page has loaded, continue loading/caching the remaining images.

var myImgs = ['path/to/img1.jpg', 'path/to/img2.gif'];
var x = 0, y = 5;
function preload(imgs, x, y) {
    var img;
    for (var i = x; i < y; ++i) {
        img = new Image(); // if you know the size of the images (and they are the same) use Image(200, 300);
        img.src = imgs[i];
    }
}
preload(myImgs, x, y);
window.onload = function () {
    // or just put this code before the closing body tag
    preload(myImgs, y+1, myImgs.length);
}

In terms of a tutorial, I would just be Googling for one, but perhaps someone else has a recommendation.