jQuery.html5Loader can preload images, html5 video and audio sources, script and text files. This plugin needs a JSON file to get the files that it has to preload (or at least you can use also a javascript object), and it provides an easy API to communicate the state of loading.
- smart: it loads just the sources supported by the client running the script.
- flexible: it returns the current percentage and the object loaded, so you could be free to show this info as you like
- fun: inside the package you could find some preloading animation examples, customizable and ready to use
http://www.gianlucaguarini.com/canvas-experiments/jQuery-html5Loader/
{
"files": [
{
"type":"SCRIPT",
"source":"../path/to/your/script.js",
"size":4.096
},
{
"type":"IMAGE",
"source":"../path/to/your/image.jpg",
"size":620
},
{
"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
},
"mp4":{
"source":"../path/to/your/video.mp4",
"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
}
}
}
]
}
<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 ) {}
});
onBeforeLoad
It is triggered before the loading process startsonComplete
It is triggered when the plugin finishes to load all the sourcesonMediaError
This function is invoked in case of any error occurred during the media element fetchobj
original object passed to the pluginelm
html output (for type "SCRIPT" and "TEXT" this value is just a string)
onElementLoaded
It is triggered anytime a new element of the json array is 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 loadedpercentage
the percentage currently loaded
- Internet Explorer 9 and 10 do not return any value using the method
canPlayType
on 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 the preloading of any video or audio element is skipped because those devices can't preload those elements since a user interacts with them
- create a nodejs script that is able to read files in a folder exporting the JSON file needed to preload them