Javascript, Array, préchargement d'images et autres complications ;-)

Recherche :

Dernière réponse
Sujet : Javascript, Array, préchargement d'images et autres complications ;-)
verdy_p	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.

Dernière réponse

Sujet : Javascript, Array, préchargement d'images et autres complications ;-)

verdy_p

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.