[JS] Ajouter un loader pendant le chargement de vos pages web

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