Use of PreloadJS ​

var $ = jQuery
// indicator for preloading percentage
var $indicator = $('#loadingInner')
var preload
var manifest = [
  {
    src: '/img/magic.jpg',
    id: 'magic'
  }, {
    src: '/img/snow.png',
    id: 'snow'
  }
]

// start preloading
function startPreload () {
  preload = new createjs.LoadQueue(true)
  preload.on('fileload', handleFileLoad)
  preload.on('progress', handleFileProgress)
  preload.on('complete', loadComplete)
  preload.on('error', loadError)
  preload.loadManifest(manifest)
}

// handle single file
function handleFileLoad (event) {
  console.log('File type: ' + event.item.type)
  /*
  if(event.item.id == 'magic'){
    console.log('majic picture has been loaded!');
  };
  if(event.item.id == 'photo') {
    console.log('photo picture has been loaded!')
  }
  */
}

// handle preloading error
function loadError (evt) {
  // console.log('There is something wrong!',evt.text);
}

// handle preloading process
function handleFileProgress (event) {
  var percentage = preload.progress * 100 | 0
  $indicator.css({
    width: percentage + '%'
  })
}

// handle preloading success
function loadComplete (event) {
  // console.log('All resources have been loaded!');
  setTimeout(function () {
    $('#page0').slideUp(600)
  }, 300)
  // console.log('Hello world!');
}
// invoke the method
startPreload()