Introduction

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.

Features

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

Demo

http://www.gianlucaguarini.com/canvas-experiments/jQuery-html5Loader/

USAGE

1 Create a JSON file like this, containing all the files you need to preload ( size in bytes ):


{
		"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
					}
				}
			}
		]
	}

2 Import the plugin into your page:


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../js/jQuery.html5Loader.js"></script>

3 Initialize the plugin setting the callback functions:


$.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 ) {}		
});

API

Methods

onBeforeLoad It is triggered before the loading process starts
onComplete It is triggered when the plugin finishes to load all the sources
onMediaError This function is invoked in case of any error occurred during the media element fetch
- obj original object passed to the plugin
- elm 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 plugin
- elm 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 loaded

KNOWN ISSUES

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

TODO LIST

create a nodejs script that is able to read files in a folder exporting the JSON file needed to preload them

sahilpopli / jQuery.html5loader