[Total : 30    Moyenne : 3.6/5]

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

.loader {

position : fixed;
z-index: 9999;
background : url('icon-loader.gif') 50% 50% no-repeat;
top : 0px;
left : 0px;
height : 100%;
width : 100%;
cursor : wait;
}

Ce code CSS va forcer l’image de chargement à 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 :


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(window).load(function() {
	$(".loader").fadeOut("1000");
})
</script>

 

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.

<link rel= »stylesheet » href= »font-awesome.min.css »>

 

2. Charger la librairie jQuery et le plugin jQuery Button Loader.

<link href= »buttonLoader.css » rel= »stylesheet »>
<script src= »jquery-1.11.3.min.js »></script>
<script src= »jquery.buttonLoader.js »></script>

 

3. Utiliser JavaScript pour appeler l’animation au clic sur le bouton.


$('.button-class').click(function () {
  var btn = $(this);
  $(btn).buttonLoader('start');
  setTimeout(function () {
    $(btn).buttonLoader('stop');
  }, 5000);
});


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.

Restaurer une BDD MySQL à partir des fichiers .frm