Here is how you can preload images which are needed later (e.g. when a hover is performed). You may notice that when replacing an image on the hover state, you get this horrible flicker, that is because the image is loaded as you hover the element. The below code will load the image on page load and therefore overcome this problem.

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

$.preloadImages("hover-img-1.jpg","hover-image-2.jpg");

Simly add all the images you want to preload in the array of $.preloadImages and you should be good to go. Depending on your requirements, you can place this code outside or inside the $(document).ready() code.

Hope this helps!