🤯 50% Off! 700+ courses, assessments, and books
Browse Titles
JavaScript

Web App Image Preloading Setup in 2mins

Sam Deering
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!

progress-demo

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.

preload-1

2nd Page Load (refresh).

preload-2

Setting up the lugin helper code/examples:

These resources will help you expand if you get stuck.