Simple JQuery preloader

Simple JQuery preloader

Good morning all,

I'm fairly familiar with PHP, and have in the past done some Javascript coding.

The company I work for has started using JQuery for some graphical elements such as banner rotation and lightboxes.

I have found and modifed JQuery code that allows me to create a gallery of thumbnails, with a simple fade-in/out action when you click on each of the thumbnails.

My trouble is that the pictures I am using for the large images are taking a while to load, so I thought i'd look for a simple JQuery preloader.

I'm having a bit of trouble trying to combine a 'for each' loop and the preloader.

On the page itself, I have some PHP which loads each of the thumbnails and assigns the relevant class to each of them:

for ($picnum = 1; $picnum <= 15; $picnum++) {
echo('<a href="#" rel="images\pic'.$picnum.'.jpg" class="image"><img src="images\pic'.$picnum.'.jpg" class="thumb" border="0"/></a>');
}

(this loads 15 images, and the gallery is functional).

In the JQuery code, I've added a bit of code for Preloading that I found:

jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
}
}

(now i'm not even sure if that's right - or if it works?)

The next bit of code I have is meant to loop through the images that have been loaded on the page, and then preload them.

function example() {

    var imagesource = '';
    for(var i = 0; i < $('#preloadimages a').length; i++) {
        imagesource += $('#preloadimages a')[i].rel + "\n";
    }
$.preloadImages(imagesource);

<body onload="example()">

- I'm pretty sure i've made a right hash of this code, and that there's a really simple reason why it's not working, but any information or help that you could give me would be greatly appreciated!

Many thanks in advance,

Rachael