Create a real preloader with Preload.js


Create a real preloader with Preload.js

With the constantly growth of AJAX website, one of the most important aspect of every web application is for sure the preloader. It is an important feedback for the final user, it simply say "Hey man, wait...I'm loading beautiful stuff, don't leave away!" and it could also be part of a stunning animation timeline to entertain your guest.

Today I wanna show you how to use a fantastic JavaScript library to manage the loading of the assets of your web apps: Preload.js, part of Create.js project (here the project page).

Why I think this is one of the best JS library for this kind of work? Because it's a real preloader that use XHR2, so it can communicate real progress informations on the go and provvide a lot of nice features like pause the process, trigger events and much more.

So, if you are ready, check out the demo page and let's start loading stuff!


demo download source


The food for our preloader

The first things to do is create a simple data structure to collect our assets. For this kind of job I generally use a array populated by a foreach instruction that read the DOM looking for assets, but today for our tutorial I want to use a pre-made array containing a list of images. Remember: Preload.js can load different type of files, I wanna use images just for example.

var myAssets = [  
      'assets/imgs/img-0.jpg',
      'assets/imgs/img-1.jpg',
      'assets/imgs/img-2.jpg',
      'assets/imgs/img-3.jpg',
      'assets/imgs/img-4.jpg',
      'assets/imgs/img-5.jpg',
      'assets/imgs/img-6.jpg',
      ];

Create a new Preload.js instance

We are ready to setup our preloader. This step is very easy: create a new Preload.js instance, setup some event listener and launch the loading process.

var preloader = new createjs.LoadQueue();  
preloader.on("progress", onProgressPreloader, this);    // on progress listener  
preloader.on("complete", onCompletePreloader, this);    // on complete listener  
preloader.loadManifest(myAssets);                       // launch the loading process  

Show the progress

Everytime our preloader load a part of one resource in our loading queue, it trigger a "progress" event, listened by our listener function: in my demo, we print on the screen the actual percent of loading.

function onProgressPreloader(e){  
    var perc = Math.round(e.progress * 100);
    document.getElementById('my-preloader__text').innerHTML = perc + '%';
}

Loading complete!

Finally, our preloader has completed the job. It now trigger the "complete" event, the final step of our tutorial: in my case I will a simply class to our graphic preloader to show the web page.

function onCompletePreloader(e){  
    document.getElementById('my-preloader').classList.add('my-preloader--loading-complete');
}

And that's all for today...hope you enjoy it!
For every question, feedback and integrations, drop a comment below! :)



Daniele Petrarolo

Daniele Petrarolo

http://www.danielepetrarolo.com

In love with #JavaScript, #PHP and #Python / Web Developer / There's no place like 127.0.0.1.

View Comments