Html5 loader jQuery plug-in

(Beta version 1.1)

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.

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:

<script src="js/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/jQuery.html5Loader.js"></script>

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)

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 any issue here

Demos

Download source and Fork on Github
Tweet

© Gianluca Guarini 2011