website preloading

This is my website: http://justxp.plutohost.net/jonydesigns/index.php

As you see the menu images jumping when you hover on them because the hover images hasn't changed or loader yet.

and the images in overall.

I want to make a preloader that shows a loading.gif icon while loading the page, once loaded, just show the page or fade out to the page.

Are there any preloaders tutorials for that? I have googled website preloaders, all i found was some custom css preloading bars, and preloaders for specify images.

I need a preloader for the whole website.

Does any one know where I can find one? Thanks!

To preload the images, just put this in your initialization (you don't have to wait for document.ready to run this):

var img1 = new Image();
img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";
var img2 = new Image();
img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png"

or ( jQuery : )

$.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img />", {style:'display:none'}).attr("src", arguments[i]);
  }
}

Usage :

$.preloadImages("img2_thumb.jpg", "img1_thumb.jpg",    "img3_thumb.jpg");

ofcourse- the images should be the hover images.