jQuery & Html5 Based Preloader Plugin - html5loader

html5loader is a jQuery plugin that has the ability to preload media files (images, videos, scripts, text files, etc...) from a JSON file with a customizable preloader that displays the loading progress bar/percentage. With this jQuery plug in you can preload your page getting the percentage of bytes loaded just in HTML5.

How to use it:

1. Include the required jQuery javascript library and jQuery Html5loader plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="src/jquery.html5Loader.js"></script>

2. Include the jQuery NProgress plugin for providing a slim progress bar for the preloader.

<link rel="stylesheet" href="lib/nprogress.css" />
<script src="lib/nprogress.js"></script>

3. Create a container for the preloader.

<div id="html5Loader"></div>

4. Create a wrapper for the media files you want to preload.

<div id="wrapper"></div>

5. Create a JSON filecontaining all the files you need to preload

{
  "files": [{
    "source": "../files/test.js",
    "type": "SCRIPT",
    "size": 4.096,
    "stopExecution":false
  },{
    "source": "../files/test2.js",
    "type": "SCRIPT",
    "size": 4.096,
    "stopExecution":true
  }, {
    "source": "../files/image1.jpg",
    "type": "IMAGE",
    "size": 270.336
  }, {
    "source": "../files/image2.jpg",
    "type": "IMAGE",
    "size": 491.52
  }, {
    "source": "../files/image3.jpg",
    "type": "IMAGE",
    "size": 421.888
  }, {
    "source": "../files/image4.jpg",
    "type": "IMAGE",
    "size": 249.856
  }, {
    "source": "../files/image5.jpg",
    "type": "IMAGE",
    "size": 167.936
  }, {
    "source": "../files/image6.jpg",
    "type": "IMAGE",
    "size": 331.776
  }, {
    "source": "../files/image7.jpg",
    "type": "IMAGE",
    "size": 421.888
  }, {
    "source": "../files/image8.jpg",
    "type": "IMAGE",
    "size": 573.44
  }, {
    "source": "../files/image9.jpg",
    "type": "IMAGE",
    "size": 270.336
  }, {
    "source": "../files/image10.jpg",
    "type": "IMAGE",
    "size": 294.912
  }, {
    "source": "../files/text.txt",
    "type": "TEXT",
    "size": 45.056
  }, {
    "source": "../files/test.css",
    "type": "CSS",
    "size": 16.819
  }, {
    "type": "VIDEO",
    "sources": {
      "webm": {
        "source": "http://video-js.zencoder.com/oceans-clip.webm",
        "size": 14625011
      },
      "ogg": {
        "source": "http://video-js.zencoder.com/oceans-clip.ogv",
        "size": 13235468
      },
      "h264": {
        "source": "http://video-js.zencoder.com/oceans-clip.mp4",
        "size": 19448241
      }
    }
  }, {
    "type": "VIDEO",
    "sources": {
      "webm": {
        "source": "http://clips.vorwaerts-gmbh.de/VfE.webm",
        "size": 7901210
      },
      "ogg": {
        "source": "http://clips.vorwaerts-gmbh.de/VfE.ogv",
        "size": 4964107
      },
      "h264": {
        "source": "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
        "size": 5251725
      }
    }
  }, {
    "type": "AUDIO",
    "sources": {
      "mp3": {
        "source": "../files/creep.mp3",
        "size": 9285.632
      },
      "ogg": {
        "source": "../files/creep.ogg",
        "size": 2089.688
      }
    }
  }]
}

6. Initialize the plugin.

<script type="text/javascript">
NProgress.start();
$.html5Loader({
filesToLoad:'src/files.json',
onUpdate: function(perc){
NProgress.set(perc/100);
},
stopExecution:true,
onComplete: function () {
console.log("All the assets are loaded!");
NProgress.done(true);
},
onElementLoaded: function ( obj, elm ){
if(!~$.inArray(obj.type,["TEXT","SCRIPT","CSS"])) {
$("#wrapper").append(elm);
}
}
});
</script>

7. Check the examples for more usages.

• NProgress preoloader
• Append sources
• Big counter preoloader
• Circular Preloader
• Line Preloader

Change log:

2017-12-23

• Added onImageError() to avoid blocking the percentage count if the image can not be loaded

v1.8.0 (2014-10-25)

• update to the latest version

v1.6.9 (2014-02-09)

• update to the latest version

---

This awesome jQuery plugin is developed by GianlucaGuarini. For more Advanced Usages, please check the demo page or visit the official website.