jQuery & Html5 Based Preloader Plugin - html5loader
File Size: | 3.68 MB |
---|---|
Views Total: | 17164 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
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.