PxLoader - Contrôler le chargement de ses ressources en Javascript

PxLoader est un script JS permettant de contrôler le chargement de vos images, sons etc. dans vos sites et applications web.

Si vous lancez un jeu HTML5 ou encore une application très graphique, le temps de chargement des images, sons et autres fichiers lourds est assez significatif.

Grâce à PxLoader, vous pourrez précharger ces images et gérer le temps de chargement. Vous pourrez alors proposer un loader pour faire patienter vos visiteurs.

Le script est découpé en 3 fichiers:

• Le fichier principal PxLoader.js
• Le fichier qui s'occupe du chargement des images: PxLoaderImage.js
• Et celui responsable du chargement des sons: PxLoaderSound.js

Le script dispose d'une API permettant aux développeurs de créer d'autres managers de chargement spécialisés.

var loader = new PxLoader(), 
    backgroundImg = loader.addImage('images/headerbg.jpg'), 
    treesImg = loader.addImage('images/trees.png'), 
    ufoImg = loader.addImage('images/ufo.png'); 
 
// callback that will be run once images are ready 
loader.addCompletionListener(function() { 
    // Action finish
}); 
 
// begin downloading images 
loader.start(); 

Et côté utilisation, c'est très simple, il suffit de spécifier les ressources à charger, bind les bons évènements et lancer le loader.

Si vous souhaitez animer le pourcentage d'un loader, vous pourrez utiliser l'évènement addProgressListener.

Site Officiel