Web App Image Preloading Setup in 2mins
Share
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
- Include the preload.js plugin
- Create your loading manifest of images
- (optional): Display a loading progress meter
- (optional): Do something in the completed loading callback
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