dimanche , 24 septembre 2017

jQuery loader

Nous allons voir comment réaliser un plug-in loader (chargement) de page avec JavaScript et notamment avec la toute dernière version de jQuery.

voir l’exemple

Avant de rentrer dans le vif du sujet, il est important de comprendre le fonctionnement général du chargement de la page. Dans un premier temps, la page html DOM se charge puis, dans un second temps, les divers contenus de la page se chargent (images, flash, etc…).

Au « temps zéro », la page est vierge !

Le premier temps, dans jQuery, se traduit par les lignes suivantes :

$(document).ready(function() {
	// Le dom est chargé
	// ici notre loader
	$.pageLoader() ;
})

Le second temps, dans jQuery, se traduit par les lignes suivantes :

$(window).load(function() {
	// La page est intégralement chargée
	// votre code ici…
	// code déjà présent dans le plug-in jQuery
}) ;

Notre loader va s’occuper d’afficher sur la page du site la progression du chargement entre le premier et le second temps.

Le Javascript et les navigateurs comportent certaines limites quant à la détection de la progression du chargement à la différence par exemple de Adobe Flash qui sait précisément où en est la progression du chargement dans son ensemble. Le Javascript ne pourra détecter que les éléments chargés totalement au fur et à mesure.

Les images sont simples à détecter. Il n’en est pas de même pour les objects et autres éléments qui sont, en quelque sorte, des blocks hors de la zone de chargement de la page.
L’exemple le plus parlant est une vidéo YouTube : la page est chargée intégralement, cependant les vidéos continuent les progressions dans leur chargement et vous n’aurez aucun contrôle sur la progression de ce téléchargement (sauf si vous avez créé ou si vous un accès au player en lui-même).

Pour en revenir à notre loader de page, ce dernier se « contentera » de détecter les images présentes dans la page dans une balise image img . Il détectera également les images présentes en style CSS dans un background ou un background-image. Une fois cet ensemble d’éléments constitués, le Javascript ressortira un pourcentage sur la progression du téléchargement des éléments. Le point final du 100% sera dans tous les cas $(window).load(function() {…}) ;

La solution que nous vous proposons ici peut, bien sûr, être adaptée selon vos souhaits.

  • Dans le temps zéro, le contenu de la page en CSS est masqué par visibility: hidden; et le mot Chargement  est clairement visible par dessus l’ensemble en CSS par un position: absolute;
  • Dans le premier temps (jusqu’au second temps), le Javascript avec l’aide de jQuery affichera la progression en pourcentage du chargement de la page.
  • Dans le second (et donc dernier) temps, le Javascript / jQuery affichera le 100% puis masquera la panneau de Chargement, en affichant le contenu même de la page.

Vous êtes parvenu jusqu’à cette ligne sans vous endormir ?! Bravo, nous allons à présent mettre les mains dans le moteur…

Voyons, plus en détails, le code source du Javascript :

var $elements = $('body').find('img[src]');

Nous allons recherché dans l’élément DOM body toutes les images img comportant l’attribut src.
Nous aurions bien pu mettre find(‘[src]’), ceci aurait permis de rechercher tous les éléments (image ou non) qui comportent l’attribut src mais après plusieurs tests, la plupart des navigateurs ne détectent par le chargement des autres éléments… (à vous de tester ;-))

$('body [style]').each(function() {
	var src = $(this).css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
	if(src && src != 'none') {
		$elements = $elements.add($('<img src="' + src + '"/>'));
	}
});

Ces lignes ont pour but de rechercher tous les éléments contenant l’attribut style puis de déterminer s’ils contiennent un background-image (background inclus). Si un lien image est trouvé, le script crée et empile avec add une balise fictive img dans la liste des éléments afin de pouvoir détecter le chargement de la dite image en style css.

$chargement et $chargementInfos gardent en mémoire le div de chargement et le span affichant le résultat.

elementsCharges incrémente le nombre d’éléments chargés qui permettra de nous sortir un pourcentage.

Nous reviendrons après sur la fonction animateStep
Les fonctions chargementEnCours et chargementTermine sont très similaires car elles effectuent la même tâche à la différence de chargementTermine qui déclenchera la fermeture du chargement et l’apparition du contenu du site avec la manipulation de l’opacité opacity.

Vous constaterez dans le code que ces deux fonctions sont appelées sur un évènement (event) .load()

Je ne détaille pas le calcul du pourcentage qui me semble parlant de lui-même, en revanche ces lignes devraient vous surprendre :

.animate({pourcentage:pourcentage}, {
	duration: duration,
	step: animateStep
});

En effet, la propriété pourcentage en style CSS n’existe pas, mais nous allons utiliser le moteur de calcul de jQuery pour afficher le pourcentage dans notre $chargementInfos. La clé de cette astuce provient du step qui permet de lier une fonction à chaque étape step du calcul de jQuery.
A partir de là, la fonction :

function animateStep(now, fx) {
	$chargementInfos.text(parseInt(now)+'%');
}

permet d’afficher le now qui n’est autre que le pourcentage que nous souhaitons voir progresser ! Et le tour est joué.

voir l’exemple télécharger l’archive
[Total : 21    Moyenne : 4.1/5]

A propos jeanluc

Check Also

jQuery bulle

Nous allons créer une info bulle simple au survol d'un élément, ceci avec juste quelques lignes de code, nous utiliserons la bibliothèque jQuery.

10 Commentaires

  1. Bonjour,

    Excellent loader ! Mais est-il possible de m’aider à le faire fonctionner avec jquery 1.8.2 ? Car mon site ne fonctionne qu’avec cette version :/ et j’aimerai y intégrer votre loader.

    Merci

  2. Bonjour,

    J’ai cherché « firebug » sur google, enfait je ne connaissait pas car je suis sous Chrome ^^, donc j’ai ouvert firefox, et enfait dans la console j’ai 2 messages, mais aucun en rapport avec votre loader. J’ai quand même fais le test en supprimant les causes de ces 2 messages, donc du coup je n’ai plus aucune erreur, mais le loader ne fonctionne pas mieux. Le chargement se fait bien jusqu’a 100% mais après ça reste sur une page blanche !
    Pouvez m’aider à résoudre ce problème ?

    Merci

  3. Bonjour,

    j’aimerais aussi réaliser un “fade in” du site après le chargement terminé, que dois-je modifier dans le fichier js?
    Et le loader marche t-il avec IE8 ?

    Cordialement

    • Ligne 79 du js changer :
      .animate({opacity:1});
      par
      .fadeTo(10000, 1); // ou le premier chiffre correspond au temps en milliseconde du fade

      pour IE8 à tester !!

      • j’ai testé sous IE8, on ne voit pas la barre de chargement ni le pourcentage augmenter, le 100% s’affiche d’un coup une fois le chargement terminé.
        y’a t-il moyen de revoir celà ?

        cordialement

  4. Ce script fonctionne sous IE8
    (Pour IE8 attention aux balises html5 qui ne sont pas reconnues…)

  5. Je trouve juste deux défaut pour ce script (qui est super hein :D) c’est qu’il ne cherche les background-image que sur les éléments avec un attribut style et l’autre c’est que tu check avec $(window).load(); au lieu du pourcentage (qui dans ton cas ne change pas grand chose mais pour une adaptation pour juste une partie de page sera plus optimisé).

    Sinon encore bravo pour le script ça faisait un petit moment que je devais en faire un sans trop avoir le temps.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *