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
Switch branches/tags
Nothing to show
Pull request Compare This branch is 89 commits behind GianlucaGuarini:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
files
js
LICENSE.txt
README.md
index.html
preloaderFallback.gif

README.md

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

Screenshot

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

USAGE

#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' 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