html5 tutorial : barre de progression sur chargement des images

 

Dans la continuité de l’article précédent, je vous montre comment utiliser une barre de progression HTML5 pour le chargement des images.


Pour ceux que ça intéresse, un article sur la balise HTML5 meter, balise proche de progress, est accessible ici.

 

Prérequis

– au moins un navigateur compatible sous la main;
– savoir ce qu’est le code Javascript et en avoir pratiqué un peu,
– savoir ce qu’est le code html et en avoir pratiqué un peu,
– avoir lu l’article Afficher une barre de progression en HTML5.

 

La librairie Javascript PxLoader

La librairie Javascript PxLoader permet de gérer le chargement d’images, de vidéos ou de fichiers audio.
Cette API expose en temps réel, toute une série d’informations sur le chargement. Au développeur de les exploiter. Et c’est ce que je vais vous montrer dans la suite de cet article.

 

L’exemple

L’exemple va consister à charger une centaine d’images. Ce chargement sera matérialisé par une barre de progression évoluant en temps réel.
Comme je n’ai pas une centaine d’images à vous proposer, je me suis permis d’utiliser le script slowImage.php de PxLoader qui simule le chargement d’une grosse image avec un délai d’une seconde. Sans quoi, les choses iraient trop vite et nous ne pourrions pas voir la barre de progression se remplir.

 

Télécharger librairie Javascript PxLoader

Le fichier téléchargeable ici, est à décompresser pour l’utilisation de la librairie et contient 5 fichiers :

PxLoader.js : fichier central de la bibliothèque;
PxLoaderImage.js : fichier de la bibliothèque dédié au chargement des images;
PxLoaderSound.js : fichier de la bibliothèque dédié au chargement des fichiers audio;
PxLoaderVideo.js : fichier de la bibliothèque dédié au chargement des vidéo;
– README.

 

La base de travail PxLoader

La première chose que nous faisons est de créer le fichier html progressBarImagePxLoader.html dans lequel nous déclarons la barre de progression grâce à la balise html5 progress.

<html>
 <body>
  <progress id="progressBarImage"></progress>
 </body>
</html>

Ensuite nous incluons les fichiers de la librairie PxLoader. Notez que l’attribut type ou language de la balise html script est inutile en html5.

<script src="PxLoader.js"/></script>
<script src="PxLoaderImage.js"></script>

Maintenant que tout est prêt, entrons dans le vif du sujet.

 

PxLoader en action

Nous déclarons 4 variables :
progressBarImage, l’objet Javascript de notre progress bar;
maxProgressBarValue, la valeur maximale de notre progress bar;
pxLoader, l’objet PxLoader qui permet de gérer le chargement;
baseUrl, une url de base à partir de laquelle nous téléchargeons nos images.

var maxProgressBarValue = 100;
var progressBarImage;
var pxLoader = new PxLoader();
var baseUrl = 'http://thinkpixellab.com/pxloader' + '/slowImage.php?delay=1&time=' + new Date;

Ensuite, nous créons une fonction d’initialisation appelée au chargement de la page. Cette fonction met dans la pile de PxLoader, par le biais de la méthode add, toutes les images à charger. La méthode add charge n’importe quel type de média dans la pile.

var initialisation = function() {
  progressBarImage = document.getElementById( "progressBarImage" );
  progressBarImage.value = 0;
  progressBarImage.max = maxProgressBarValue;
 
  // ajout des 100 images dans le pile de chargement de PxLoader
  for(var i=0; i < maxProgressBarValue; i++) {
    var imageUrl = baseUrl + "&i=" + i ;
    var pxImage = new PxLoaderImage(imageUrl);
    pxLoader.add(pxImage);
  }
 
  // démarrage du chargement des images
  pxLoader.start();
}

Dans notre cas, l’utilisation de la méthode addImage aurait été plus appropriée si par la suite on souhaitait afficher nos images. Cette méthode renvoie un objet Javascript de type Image.

Cependant pour les besoins de l’exemple, le script slowImage.php renvoyant toujours la même image, le mécanisme du cache du navigateur se mettrait en place et considèrerait donc que toutes les images téléchargées dès la première image. De ce fait, la barre de progression se remplirait quasi immédiatement. Ceci me pousse donc à utiliser add au lieu de addImage.

Il nous reste plus qu’à appeler la fonction initialisation au chargement de la page :

window.onload = function() {
 initialisation();
}

Le travail est quasiment terminé puisqu’il ne reste plus qu’à mettre à jour la valeur courante de la barre pour la progression à l’affichage.

 

Les évènements de la librairie PxLoader

Deux événements rattachés à PxLoader nous intéressent plus particulièrement :
– l’événement addProgressListener levé au fur et à mesure du téléchargement des images, qui va nous permettre de faire évoluer notre progress bar en temps réel;
– l’événement addCompletionListener levé lorsque tous les téléchargements sont terminés, qui va nous permettre de supprimer la progress bar lorsque les téléchargements seront terminés.

Nous utilisons donc l’événement addProgressListener pour mettre à jour notre barre de progression. Cet événement expose les propriétés :
completedCount qui donne le nombre d’items (ici des images) qui ont été téléchargées par PxLoader;
totalCount qui donne le nombre total d’items (ici des images) à télécharger par PxLoader;

  pxLoader.addProgressListener(function(e) {
    progressBarImage.value = e.completedCount;
   }
  );

Et l’événement addCompletionListener pour retirer la barre de progression de l’affichage :

  pxLoader.addCompletionListener(function(e) { 
    progressBarImage.hidden = true;
   }
  ); 

Le source complet de l’exemple est téléchargeable ici.

 

Ressources PxLoader

Le site web de la librairie : PxLoader.

 

Conclusion

Pour la vidéo et les fichiers audio, l’exercice est tout aussi simple : 2 articles suivront à ce propos.

 

Si vous avez aimé cet article, partagez le. Vous connaissez une librairie qui fait la même chose.

 

Si vous constatez des coquilles, ou avez des remarques à faire ou encore souhaitez manifester votre satisfaction de ce tuto, n’hésitez pas les commentaires sont faits pour ça.

 

Posté dans html5Taggé HTML5 image progress bar, html5 meter, html5 progress bar, image progress bar  |  Laisser un commentaire

Répondre