I will present 2 ways of preloading images with jQuery.
The first one is pre-loading images from an array, the second one is preloading image paths stored in a special attribute.

Pre-loading images means we want to load the images when the page is loading, so we can have them loaded when we want to use them. They are used especially for hover effects: for example if I have an image and on hover I want to change it with the other image. If the second image is not preloaded there will be nothing displayed until it is loaded (the load time depends on internet connection and server speed).

1.) Preload from an array

function preload(images)
    for (var i = 0; i < images.length; i++)
         var img = images[i];
         jQuery("<img />").attr('src', img).appendTo("body").hide();


    preload(["main.jpg", "product1_hover.png", "i/product2_hover.png"]);

2.) Preload from a special attribute
This method is not so different from the previous one. It will only allow us to specify the images we would like to preload on the element(s) where we used them, scattered in the html code and not in a single javascript block.

Html code:

<img src="test.jpg" alt="Test image" hoverimg="test_hover.jpg" />
<img src="test2.jpg" alt="Test image" hoverimg="test2_hover.jpg" />
<img src="test3.jpg" alt="Test image" hoverimg="test3_hover.jpg" />

Javascript code:

    $("[hoverimg]").each(function(index, item){
        var path = $(item).attr('hoverimg');
        jQuery("<img />").attr('src', path).appendTo("body").hide();

The second method searches all items with `hoverimg` attribute, extracts the hover image paths and pre-loads them. You can, of course, change the name of the attribute as you wish.
I also attached the files I used to run these tests: Download the test files.