Une façon très simple de précharger des images en JQuery est de créer des balises <img> en mémoire, mais sans les ajouter au DOM.

Voici le code :

function miseEnCacheImages() {
	// Array of images:
	var imageArray = ['images/bouton1_on.jpg', 'images/bouton2_on.jpg'];
	 
	// Loop through and declare an element that will not actually be used.
	$.each(imageArray, function (i, val) {
	  $('<img/>').attr('src', val);
	});
}

Source

Script pour précharger les images en CSS

jPreLoader - un script pour afficher une barre de chargement des images

Les sprites

Une bonne pratique est d'utiliser les sprites. C'est-à-dire qu'au lieu d'avoir des images différentes pour chaque état d'un bouton (rollovers, sélectionné, etc.), on peut utiliser une même image qui contient l'ensemble de ces états. Il suffit ensuite d'afficher qu'une partie de cette image à la fois. Pour ce faire, on utilise la propriété background-image et on spécifie les dimensions pour un seul état (width et height). Lorsqu'on veut changer la partie visible, on déplace l'image à l'aide de la propriété background-position.

Un bon article qui parle de cette technique

Par contre, il existe un désavantage à cette technique. Lorsqu'on combine une image à un contenu texte, tel qu'un bouton et son icône, on devra appliquer l'image sur un <span> vide afin de pouvoir afficher qu'une seule partie de notre image de sprite.