Skip to main content

Web App Image Preloading Setup in 2mins

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.