jQuery.html5Loader can preload images, SVGs, html5 video and audio sources, css, scripts and text files. This plugin needs a JSON file to get the files that must be preloaded (you can use also use a javascript object as well), and it provides an easy API to give you the right amount of files loaded in percentage.
All the javascript and css files will be automatically loaded and injected into the DOM
$ bower install jquery.html5loader
# or via npm
$ npm install jquery.html5loader- smart: it loads just the sources supported by the client running the script.
- flexible: it returns the current percentage and the object/element loaded, so you could be free to show this info as you prefer
- fun: inside the package you could find some preloading animation examples, customizable and ready to use
- nprogress preloader by Rico Sta. Cruz
- Append the files loaded on the fly
- Big counter animation
- Circular preloader
- Line preloader
{
"files": [
{
"type":"SCRIPT",
"source":"../path/to/your/script.js",
"size":4.096,
"stopExecution":true
},
{
"type":"SCRIPT",
"source":"../path/to/your/script.js",
"size":4.096,
"stopExecution":false
},
{
"type":"IMAGE",
"source":"../path/to/your/image.jpg",
"size":620
},
{
"type": "CSS",
"source": "../files/test.css",
"size": 16.819
},
{
"type":"TEXT",
"source":"../path/to/your/text.txt",
"size":44
},
{
"source": {
"svg": "../files/yin-yang.svg",
"fallback": "../files/yin-yang.jpg"
},
"type": "IMAGE",
"size": 2338
},
{
"type":"VIDEO",
"sources": {
"webm":{
"source":"../path/to/your/video.webm",
"size":5054.976
},
"ogg":{
"source":"../path/to/your/video.ogg",
"size":2932.736
},
"h264":{
"source":"../path/to/your/video.mp4",
"size":9285.632
},
"vp9": {
"source":"../path/to/your/video.webm",
"size":9285.632
}
}
}
},
{
"type":"AUDIO",
"sources": {
"mp3":{
"source":"../path/to/your/audio.mp3",
"size":9285.632
},
"ogg":{
"source":"../path/to/your/audio.ogg",
"size":2089.688
},
"opus": {
"source": "../path/to/your/audio.opus",
"size":2000.20
},
"wav": {
"source": "../path/to/your/audio.wav",
"size":2000.20
},
"m4a": {
"source": "../path/to/your/audio.m4a",
"size":2000.20
}
}
}
]
}<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../js/jQuery.html5Loader.js"></script>$.html5Loader({
filesToLoad: '../js/files.json', // this could be a JSON or simply a javascript object
onBeforeLoad: function () {},
onComplete: function () {},
onElementLoaded: function ( obj, elm) { },
onUpdate: function ( percentage ) {}
});stopExecution: default false, do not execute the javascript files when they'll be preloaded, this option could be overridden into the json per each javascript filemediaBufferSizeToPreload: default 0.2, decide the the buffer size before considering the media preloadedforceMediaPreload: default true, let the browser decide when the media file has been buffered enough to be played by listening the canplaythrough eventonBeforeLoadIt is triggered right before the plugin starts loading all the filesonCompleteIt is triggered when the plugin finishes to load all the sourcesonMediaErrorThis function is called in case there's an error during the preloadingobjoriginal object passed to the pluginelmhtml output (for type "SCRIPT" and "TEXT" this value is just a string)
stopExecution(false by default) : default behavior for all the script files, they won't execute when loaded. This behavior can be changed by each script object passed to the pluginonElementLoadedIt is triggered anytime a new element of your files list gets loaded, (ATTENTION IF AN ELEMENT IS NOT SUPPORTED IT WILL NEVER PASS TROUGH THIS FUNCTION).objoriginal object passed to the pluginelmhtml output (for type "SCRIPT" and "TEXT" this value is just a string)
onUpdateit is triggered anytime new bytes are loadedpercentagethe percentage currently loaded
It is also possible to load groups of files in sequence by wrapping them in arrays. This could be handy if you need need to preload components with dependencies. e.g Backbone's dependence on underscore.
{
"files": [
[
{
"type":"SCRIPT",
"source":"../path/to/underscore.js",
"size":13.9
}
],
[
{
"source": "../path/to/backbone.js",
"type": "SCRIPT",
"size": 37.5
},
{
"source": "../path/to/three.js",
"type": "SCRIPT",
"size": 150.3
}
]
]
}You can also load SVG files providing a fallback image. jQuery.html5Loader will detect automatically if the device supports the SVGs otherwise it will just preload the fallback image.
"files":[
{
"source": {
"svg": "../files/yin-yang.svg",
"fallback": "../files/yin-yang.jpg"
},
"type": "IMAGE",
"size": 2338
}
]- Internet Explorer 9 and 10 do not return any value using the method
canPlayTypeon a video or audio element ( http://modernizr.com/docs/#audio ). For these browsers we don't preload any HTML5 media format - on mobile devices and on the iPad we cannot load any video or audio element because these devices can't preload those kind of elements until the user start dealing with them
- Write down a valid crossbrowser unit test
- added: SVGs preloading support
- added: segments preloading
- updated: the nprogress example
- added: better tablet detection tests
- added: grunt
- bugfix: skip media elements loading on mobile/tablet devices
- added: mediaBufferSizeToPreload option
- added: forceMediaPreload option
- small refactor
- added: new media file codecs tests
- video: vp9
- audio: opus, wav, m4a
- added: stopExecution option
- added: stopExecution option via json
- added: nprogress demo