Améliorer la galerie z-index avec un preloader

Dans notre précédent article, nous avons créé une galerie d'images plutôt sympa. Mais elle est incomplète pour un site en production. Au premier chargement, vous avez pu constater que les images se chargent et s'affichent très lentement. Pour avoir une apparence plus agréable, nous allons précharger toutes les images et afficher un indicateur de préchargement pour montrer aux utilisateurs que les images sont en chargement. Nous allons faire ça avec à peine 10 lignes de code ! Vous pouvez voir un exemple ou télécharger l'archive originale.

Donc, nous voulons indiquer que la galerie est en cours de chargement. Nous allons récupérer une animation de chargement sur ajaxload.info. Ensuite, nous aurons besoin d'une div par-dessus les images et les boutons.

Nous allons appliquer les styles avec du CSS et nous ajouterons la balise avec jQuery lorsque le DOM sera chargé. Comme cela, nous n'aurons pas à toucher au code XHTML (ce qui est pratique si vous avez plusieurs galeries).

Le CSS pour le calque ressemble beaucoup à celui des images. Il est positionné en absolute et aligné sur le haut gauche du conteneur pictures :

#loader {
	position: absolute;
	top: 0;
	left:0;
	height: 458px;
	width: 100%;
	background: url(../images/ajax-loader.gif) white no-repeat center center;
	z-index: 9999;
}

La première différence est la propriété height, en effet, nous voulons masquer aussi les boutons. Nous ajoutons donc la hauteur des images et celle des boutons. Comme le calque est en position absolute, il se placera par-dessus le conteneur des boutons aussi. Ensuite, nous avons la petite animation centrée en background. Enfin, avec un grand z-index, nous sommes sûrs qu'il sera au-dessus de toutes les images.

Ajouter le calque est très facile grâce à jQuery :

$('#pictures').append('<div id="loader"></div>'); //ajoute la div loader, par-dessus les images

La div sera ajoutée dès que le DOM sera prêt, nous voulons que le calque disparaisse progressivement lorsque les images seront chargées. Voici le code pour pouvoir faire cela :

$('#pictures img').each(function() { //attribue les z-index de départ
  z++; //à la fin, le plus haut z-index sera dans cette variable
  $(this).css('z-index', z); //attribue le z-index à la balise <img>
 
  $(new Image()).attr('src', $(this).attr('src')).load(function() { //crée un nouvel objet image et appelle une fonction quand elle est chargée
    imgLoaded++; //une image de plus est chargée
 
    if(imgLoaded == z) { //toutes les images sont-elles chargées ?
      $('#loader').fadeOut('slow'); //si c'est le cas, le calque disparait
    }
  });
});

Nous avons simplement étoffé la boucle d'attribution des z-index. Détaillons un peu cette nouvelle portion de code.

$(new Image()).attr('src', $(this).attr('src')).load(function() { //crée un nouvel objet image et appelle une fonction quand elle est chargée

Cette ligne est particulièrement magique ! Nous créons une nouvelle image avec l'attribut src correspondant à l'image que nous voulons précharger. Nous lui affectons l'événement load pour déterminer quand elle sera chargée.

imgLoaded++; //une image de plus est chargée

Si une image est chargée nous incrémentons un compteur.

if(imgLoaded == z) { //toutes les images sont-elles chargées ?
	$('#loader').fadeOut('slow'); //si c'est le cas, le calque disparait
}

Ensuite, nous vérifions si le nombre d'images chargées est égal au nombre total d'images. Si c'est le cas, nous faisons disparaître le calque.

Encore une fois, nous voyons comment quelques lignes de code jQuery (3 dans notre cas) peuvent permettre de régler certains problèmes. Maintenant, notre galerie est complète et peut être utilisée sur notre site.

Vous pouvez voir un exemple ou télécharger l'archive originale.