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.

Voici comment ajouter une image de chargement avec jQuery.

1 – 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.

2 – Ajout du CSS pour afficher le loader dans une div

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 ».

.loader{
	background: url('images/ajax-loader.gif') 50% 50% no-repeat rgba(255, 255, 255, 0.8);
	cursor: wait;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}
	.loader h1{
		background: none;
		border: none;
		color: #458976;
		font-size: 22px;
		font-family: "Open Sans",sans-serif;
		font-variant: small-caps;
		font-weight: 700;
		height: 700px;
		line-height: 700px;
		margin: 0 0 10px;
		padding: 0;
		text-align: center;
	}

3 – Ajouter un effet fadeout grâce à jQuery.

Saisir le code après la balise d’ouverture du body :

<div class="loader">
<h1>Veuillez patientez pendant le chargement de la page.</h1>
</div>
<script>
jQuery(window).load(function(){ jQuery(".loader").fadeOut("200"); });
</script>

Et pour créer votre loader, vous pouvez le choisir sur ce site.

Source

2 réponses à “[JS] Ajouter un loader pendant le chargement de vos pages web”

  1. Bonjour,
    j’ai une version prestashop 1.5.6.2

    super cette petite fonction « loader »

    mais pour l’installation, je n’y comprend rien

    dans quel fichier doit je installer le script jquery

    si je veux limiter le « loader » a la page catégorie et sous-catégorie, j’ajoute le css dans le fichier categories.css

    c’est ca…???

    Merci de me guider

    Cordialement

    Patrick

    • Bonjour

      Si vous ne souhaitez limiter le loader aux pages de catégories, vous pouvez insérez le script jQuery dans le fichier category.tpl de votre thème, juste après les commentaires (vers la ligne 26). Et pour le css, oui c’est dans le fichier categories.css.

      Cordialement