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

https://gianlucaguarini.github.com/jquery.html5loader/

• http://www.mobi-myhome.ch
• http://lindberghallee.ch

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

• 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