rubyonrailsin

I think the following code should help you, I found it sometime ago it is based on this page : http://www.webreference.com/programming/javascript/gr/column3/

Basically, you need to have
- an array with url's for your big images such as picSrc[0] = 'images/big1.jpg'; picSrc[1] = 'images/big3.jpg'
- a hidden <div id="waitingPic"> in your page which displays your waiting message

When you want to load your big images you call these two lines:

$('waitingPic').show()
initPics()

Here's the code

function initPics(){
var ImagePreLoader = Class.create({
callback: null,
imageCache: new Array,
loaded: 0,
processed: 0,
noOfImages: 0,
initialize: function(images, options) {
if (options) {
if (options.callback) this.callback = options.callback;
}

this.noOfImages = images.length;
for ( var i = 0; i < images.length; i++ )
      this.preload(images[i]);
},
preload: function(imgSrc) {
var image = new Image;
this.imageCache.push(image);
Event.observe(image, 'load', this.onload.bindAsEventListener(this), false);
Event.observe(image, 'error', this.onerror.bindAsEventListener(this), false);
Event.observe(image, 'abort', this.onabort.bindAsEventListener(this), false);
image.preloader = this;
image.loaded = false;
image.src = imgSrc;
},
onComplete: function() {
this.processed++;
if (this.processed==this.noOfImages) {
this.callback(this.imageCache, this.loaded);
}
},
onload: function(e) {
this.loaded++;
this.onComplete();
},
onerror: function(e) {
this.onComplete();
},
onabort: function(e) {
this.onComplete();
}
});

var imgPreloadCallback = function(imageCache, loaded) {
    // where:
    //     imageCache is an array of the loaded images
    //     loaded is an int of the number of images that loaded.
    //doSomethingAfterImagesAreLoaded();
$('waitingPic').hide();
picsPreLoaded = true;
}

var imgLoader = new ImagePreLoader(picSrc,{callback:imgPreloadCallback});
}

Hope this helps.

Christophe