jQuery.html5Loader can preload images, html5 video and audio sources, scripts, css, and text files.
View the Project on GitHub GianlucaGuarini/jquery.html5loader
jQuery.html5Loader can preload images, 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 the amount of file loaded in percentage.
All the javascript and css files will be automatically loaded and injected into the DOM
$ bower install jquery.html5loader
{
"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
},
{
"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 eventonBeforeLoad It is triggered right before the plugin starts loading all the filesonComplete It is triggered when the plugin finishes to load all the sourcesonMediaError This function is called in case there's an error during the preloading
obj original object passed to the pluginelm html 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 pluginonElementLoaded It 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).
obj original object passed to the pluginelm html output (for type "SCRIPT" and "TEXT" this value is just a string)onUpdate it is triggered anytime new bytes are loaded
percentage the percentage currently loadedcanPlayType on a video or audio element ( http://modernizr.com/docs/#audio ). For these browsers we don't preload any HTML5 media format