Usage - GianlucaGuarini/jquery.html5loader GitHub Wiki
- 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
}
}
]
}
- 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>
- and then Initialize the plug in before
</body>using JSON file
$('#html5Loader').html5Loader({
getFilesToLoadJSON:'path to /files.json'
})
- customize plugin via css:
#html5Loader {
width:400px;
height:400px;
background-color:rgba(0,0,0,0.7);
margin:0;
position:absolute;
}
- append html5Loader div container to the
<body>
<body>
<div id="html5Loader"></div>
[.........]
</body>
if you need help report the issue here