Web App Image Preloading Setup in 2mins

Preload your Web App resources for speed. Trust me it works and takes like 2mins to implement. Modern browsers will cache you assets once loaded by the plugin so it’s only really used on initial load (see screenshots below). No more streaking images loading in your web app! The plugin can also be used to preload other things such as scripts, audio, video etc… You can also setup callbacks on individual items. That’s another post, stay tuned!

Setup Steps

Code example with Progress Bar

manifest = [

    "/img/logo.jpg",
    "/assets/image1.jpg"
    "/assets/image2.jpg"
    "/assets/image3.jpg"
     //etc...

];

// Create a preloader. There is no manifest added to it up-front, we will add items on-demand.
preload = new createjs.LoadQueue(true, ""); //change "" to add base path

//show progress
var $mainProgress = $("#mainProgress"),
    $progressBar = $mainProgress.find('.progress');
$progressBar.width(0);
preload.addEventListener("progress", function()
{
       console.log('Updating preloading progress...'+Math.round(preload.progress*100)+"%");
       $progressBar.width(preload.progress * $mainProgress.width());
});

//complete callback
preload.addEventListener("complete", function()
{
    console.log('ASSETS PRELOADED...');
});

preload.setMaxConnections(5);
preload.loadManifest(manifest);

Initial Page Load. 2nd Page Load (refresh).

Setting up the lugin helper code/examples:

These resources will help you expand if you get stuck.

• PreloadJS / examples / PreloadImages.html – https://github.com/CreateJS/PreloadJS/blob/master/examples/PreloadImages.html
• LoadQueue Class API – http://www.createjs.com/Docs/PreloadJS/classes/LoadQueue.html
• Media Grid Preloading – http://www.createjs.com/#!/PreloadJS/demos/mediaGrid

Frequently Asked Questions on Web App Image Preloading Setup