Chargement asynchrone dans une Lightbox par Ajax

Dans la précédente partie, nous avons vu comment créer une lightbox simple pour présenter des images. Vous avez noté que les images se chargent au moment ou la boite s'affichent, un effet désagréable que l'on supprime en utilisant Ajax. Avec juste une fonction et sans framework.

Le code Ajax

Aucun changement dans les descripteurs CSS ni dans le code d'affichage de la boite n'est nécessaire. Nous ajouterons juste deux fonctions pour ajouter les capacités d'Ajax à la lightbox.

Chargement d'une image par Ajax:

function preloading(i, url)
{
	var xhr=createXHR();   
	xhr.onreadystatechange=function()
	{ 
		if(xhr.readyState == 4)
		{
			i.src = url;
		} 
	}; 

	xhr.open("GET", url , true);
	xhr.send(null); 
}

L'appel de cette fonction déclenche de façon asynchrone des commandes qui s'exécutent alors que la page s'affiche.

La fonction préloading crée une instance de l'objet XMLHttpRequest (voir code en ressources plus bas), et exécute une commande GET de chargement de fichier. Rien n'est envoyé par la commande send(), il suffit que le fichier se charge en mémoire: nous voulons juste avoir l'image en mémoire...

Chargements des images en taille originale:

function loadAll()
{
	preloading(new Image(), "images/acores.gif");
	preloading(new Image(), "images/prison.gif");
	preloading(new Image(), "images/shark.jpg");
}
window.onload=loadAll;

La première fonction est appelée pour chaque image en taille originale et cela est placé, c'est une option, dans la seconde fonction elle même appelée lors du chargement de la page.

Les images seront disponibles en mémoire au moment où l'on cliquera sur les vignettes et pourront s'afficher instantanément!

Scrolling de la page

A partir de cette version de la lightbox, nous prenons en compte le déroulement de la page quand elle est plus grande que la fenêtre du navigateur.

Pour ce faire il nous a fallu résoudre une quantité de problèmes de compatibilité entre navigateurs, mais finalement nous avons mis au point un code qui fonctionne sur tous les navigateurs récents.

Avec les moteurs de rendu Gecko et Webkit, l'utilisation de la valeur de position "fixed" est bien utile, mais sous IE, il a fallu faire autrement. Voir comment dans le code JavaScript de la démo...

La démonstration

Tous les fichiers sont inclus dans l'archive.

Télécharger

© 2008-2014 Xul.fr