Hello guys I have this problem with a preloading image.

I am not very experienced in JQuery which is probably the reason why I am having problems with this image preloader.

The website can be found here - http://bit.ly/nRFLbx. The images are larger than they should be. I tried all kinds of preloaders. I found one which was able to pre-load all the CSS background images http://tinyurl.com/4zv8pe , and it really did worked, and now another pre-loader which downloads the images - http://bit.ly/rr6D8j, which I presumed worked.

The only problem is when you're loading the image, particularly in FF and Chrome, you see the first image in the sequence, which is really annoying. Ideally I wanted to use a .gif preloader, like on here http://bit.ly/riuFf1, on the JQuery slider animation, so that it all renders behind the scenes before showing the output on the web.

The slider script is a free script known as Nivo Slider obtain from here http://bit.ly/mRtDlw, it was the easiest to use because the clients kept asking for changes and this amazing slider really did allow for all those changes. However amazing the slider is, I still face the current problem.

Would anybody be able to shed light on this issue, so it can be solved?

Kind regards,
Sega

PS: getting used to the new sitepoint interface