Améliorer la galerie z-index avec un preloader

| Sebastian Senf | Didier Mouronval |

Traducteur

Bovino

Dans cet article, nous allons améliorer notre galerie d'images détaillée dans l'article précédent. Nous allons ajouter un indicateur de préchargement d'images pour obtenir une meilleure apparence de la galerie. Tout cela en même pas 10 lignes de code ! Commentez
Vous pouvez voir un exemple ou télécharger l'archive originale. ♪

- Titre : Améliorer la galerie z-index avec un preloader

- Auteurs : Sebastian Senf, Didier Mouronval

- Traducteur : Bovino

- Parution : 27 avril 2009

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ®  Sebastian Senf. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.

Sommaire

- Introduction

- Le CSS pour le calque de chargement.

- Insérer le calque dans le DOM et précharger les images.

- Conclusion

Introduction

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.

Le CSS pour le calque de chargement.

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.

Le calque de préchargement

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.

Insérer le calque dans le DOM et précharger 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.

Conclusion

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.