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
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.
Merci 🙂 j’ajouterais le site suivant qui permet de créer des loaders : http://www.wifeo.com/generateur-loader-css-gratuit.php
Bonjour,
impossible de faire en sorte que le loader s’ouvre au chargement de la page et disparaisse une fois chargée, il est là tout le temps…
Voila mon code js, sur une page .js mise en lien dans mon head, sous le lien de la biblio jquery :
$(document).ready(function() {
$(window).load(function() {
$(« .loader »).hide(« 3000 »);
})
});
Mon code css:
.loader {
margin: 0 auto;
font-size: 10px;
position: fixed;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Mon code html :
Loading…
Je crois que c’est à cause du (document).ready qui exécute ta fonction quand le document est prêt. Or, tu veux l’exécuter avant ça…
Effectivement @TOTOMATTO, je vous suggère d’essayer sans l’appel suivant : $(document).ready
+1 TONY
Bonjour,
Je voudrais adapter votre solution à un formulaire mais je me retrouve avec le loader qui bloque mon formulaire.
Serait-il possible que vous m’aidiez ? C’est pour un projet universitaire.
Merci d’avance cordialement.