Ajouter un loader pendant le chargement de vos pages web

Ajouter un loader pendant le chargement de vos pages web grâce à jQuery
Web pratique Lecture 3 minutes • 26 janvier 2014

Il arrive parfois que certaines pages d'un site internet prennent un moment pour se charger complètement. Cela s'explique par une grande quantité d'images "lourdes" ou une masse de code à interpréter. Autant de notions qui n'existent pas dans la tête d'un utilisateur lambda qui viendrait visiter votre site.
Le meilleur moyen de l'informer et de ne pas risquer de perdre des visites reste d'utiliser un "loader" (animation au chargement) afin que le visiteur comprenne que le site est bien en train de se charger, et qu'il va s'afficher sous peu.
Je vais vous expliquer, en 3 étapes, comment ajouter une image de chargement avec jQuery.
 

Étape 1 : Nous devons d'abord insérer l'image dans la page de code html

1) Soit insérant une div et en chargeant l'image en tant que "background" en utilisant le CSS.
2) Soit en insérant l'image directement, via la balise img

N.B. Je privilégie la méthode n°1.

 

Étape 2 : Ajout du CSS pour afficher le loader dans une div

Ajout du CSS pour afficher le loader dans une div
[pastacode lang="css" manual=".loader%20%7B%0Aposition%20%3A%20fixed%3B%0Az-index%3A%209999%3B%0Abackground%20%3A%20url('icon-loader.gif')%2050%25%2050%25%20no-repeat%3B%0Atop%20%3A%200px%3B%0Aleft%20%3A%200px%3B%0Aheight%20%3A%20100%25%3B%0Awidth%20%3A%20100%25%3B%0Acursor%20%3A%20wait%3B%0A%7D" message="" highlight="" provider="manual"/]
 
Ce code CSS va forcer l'image de chargement (icon-loader.gif) à se placer au centre de l'écran. Libre à vous de personnaliser votre écran de chargement. Il est par exemple possible de changer la couleur de fond via la propriété "background-color".
 

Étape 3 : Nous allons ajouter un effet fadeout grâce à jQuery.

Saisir le code avant la balise de fermeture du body :
[pastacode lang="markup" manual="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-latest.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%24(window).load(function()%20%7B%0A%24(%22.loader%22).fadeOut(%221000%22)%3B%20%7D)%0A%3C%2Fscript%3E" message="" highlight="" provider="manual"/]


Autre exemple d'utilisation : si vous voulez soumettre un formulaire qui, après clic prend quelque temps à s'exécuter, vous pouvez utiliser ce même code. Vous devez cependant créer une fonction sans le fadeOut, et appeler cette fonction à la suite du clic sur le bouton de soumission ou d'envoi.
À vos claviers !
 

Edit du 13/10/2016 : Loader pour bouton avec jQuery, une solution simple et efficace

Loader pour bouton avec jQuery
Téléchargez les fichiers du plugin jQuery Button Loader
 
1. Charger le fichier Font Awesome pour appeler l’icône du spinner.
[pastacode lang="markup" manual="%3Clink%20rel%3D%22stylesheet%22%20href%3D%22font-awesome.min.css%22%3E" message="" highlight="" provider="manual"/]
 
2. Charger la librairie jQuery et le plugin jQuery Button Loader.
[pastacode lang="markup" manual="%3Clink%20href%3D%22buttonLoader.css%22%20rel%3D%22stylesheet%22%3E%0A%3Cscript%20src%3D%22jquery-1.11.3.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22jquery.buttonLoader.js%22%3E%3C%2Fscript%3E" message="" highlight="" provider="manual"/]
 
3. Utiliser JavaScript pour appeler l'animation au clic sur le bouton.
[pastacode lang="javascript" manual="%24('.button-class').click(function%20()%20%7B%20%0Avar%20btn%20%3D%20%24(this)%3B%20%0A%24(btn).buttonLoader('start')%3B%0AsetTimeout(function%20()%20%7B%0A%24(btn).buttonLoader('stop')%3B%20%0A%7D%2C%20%0A5000)%3B%20%0A%7D)%3B" message="" highlight="" provider="manual"/]


 
 
Cet article vous a plus ? Dîtes-le en commentaire et rejoignez-nous sur Facebook pour partager d’autres astuces et tutoriels gratuits !
Tibow Webdesign vous propose aussi ses services de conseils et de création sur-mesure pour tous vos projets de site Internet et Boutique e-commerce. Devis et conseils gratuits ici.


Si cet article vous a aidé, lâchez votre plus bel applaudissement en remerciement ! 🤗