Le préchargement en arrière-plan des images ne marche pas sur les tableaux (Array) ou les objets simples (Object) car ils ne savent pas que les URL qu'on y stocke sont des URL et peuvent être téléchargées dans le cache, car pour eux les URL sont de simples chaines de caractères.
L'astuce est d'utiliser l'objet Image:
var x = new Image;
x.src = "URL";
Le fait de stocker l'URL dans l'attribut src d'un objet Image en JavaScript déclenche le chargement en arrière-plan.
Il ne reste plus qu'à former des tableaux ou des objets contenant des références à des objets Image. Par exemple:
var imgs = new Array(10);
for (var i=0; i < 10; i++) {
imgs[i] = new Image();
imgs[i].src = "images/icon"+i+".gif";
}
Ce qui lance le préchargement des images "images/icon0.gif" à "image/icon9.gif".
On peut plus tard modifier à loisir l'attribut .src d'un objet de la page HTML pour y stocker une de ces URL, et l'affichage sera instantané si ce préchargement est terminé.
Pour savoir si une image est totalement préchargée, on peut consulter l'attribut .state des objets Image.