Now you can preload your HTML 5 page with this nice plug in, passing data via JSON. You can customize it changing colors and style. It can preload video, audio, images and js

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

#1 You need to create a JSON file like this containing all the files you need to preload:

{
		"files": [
			{
				"source":"../path/to/your/script.js",
				"type":"SCRIPT",
				"size":4.096
			},
			{
				"source":"../path/to/your/image.jpg",
				"type":"IMAGE",
				"size":620
			},
			{
				"type":"VIDEO",
				"videoId":"idOfYourVideoTag",
				"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",
				"audioId":"idOfYourAudioTag",
				"mp3":{
					"source":"../path/to/your/audio.mp3",
					"size":9285.632
				},
				"ogg":{
					"source":"../path/to/your/audio.ogg",
					"size":2089.688
				}
			}
		]
	}

#2 Add the scripts inside the head of your document:

js/jquery.min.js
js/modernizr.js
js/jQuery.html5Loader.js

#3 and then Initialize the plug in before the end of body using JSON file

$('#html5Loader').html5Loader({
		getFilesToLoadJSON:'path to /files.json'
})	

#4 customize plugin via css:

#html5Loader {
	width:400px;
	height:400px;
	background-color:rgba(0,0,0,0.7);
	margin:0;
	position:absolute;
}

#5 append html5Loader div container to the body

body
div id="html5Loader" 

[.........]
/body

===========================================

Preloader options

You can set the plug in options in this way:

$('#html5Loader').html5Loader({
	option Name: 'setting'
})	

preloaderType ( 'circular' default)

• 'line'
• 'circular'
• 'big-counter' soon i will add some other kinds of preloader type

getFilesToLoadJSON ( null default)

lineWidth ( 5 default) you can set the line width

color ( "#ffffff" default) you can set the color

glowColor ( null default) you can add a golow color to everything

radius ( 40 default) set radius of the circular preloader

preloadPage ( true default) REMOVED! automatically detect every img on the page and load the src paths

fullScreen ( true default) expand the canvas loader on the entire window

onComplete ( function () {} default) you can add an event to the end of loading

onItemLoaded ( function (src,elm) {} default) you can do something when every object is loaded; @src is the path of the object loaded. @elm is the tag loaded.

pathToFallbackGif ( preloaderFallback.gif' default) set the path for the fallback gif for the browsers that not support the canvas API

debugMode ( true default) you can follow the plug in events on the javascript console

===========================================

if you need help report the issue "here":https://github.com/GianlucaGuarini/jQuery.html5loader/issues?sort=comments&direction=desc&state=closed