在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:GianlucaGuarini/jquery.html5loader开源软件地址:https://github.com/GianlucaGuarini/jquery.html5loader开源编程语言:JavaScript 64.9%开源软件介绍:IntroductionjQuery.html5Loader can preload images, SVGs, html5 video and audio sources, css, scripts and text files. This plugin needs a JSON file to get the files that must be preloaded (you can use also use a javascript object as well), and it provides an easy API to give you the right amount of files loaded in percentage. All the javascript and css files will be automatically loaded and injected into the DOM Installation$ bower install jquery.html5loader
# or via npm
$ npm install jquery.html5loader Features
Demos
Production websites using jQuery.html5loaderUSAGE1 Create a JSON file like this, containing all the files you need to preload ( size in bytes ):{
"files": [
{
"type":"SCRIPT",
"source":"../path/to/your/script.js",
"size":4.096,
"stopExecution":true
},
{
"type":"SCRIPT",
"source":"../path/to/your/script.js",
"size":4.096,
"stopExecution":false
},
{
"type":"IMAGE",
"source":"../path/to/your/image.jpg",
"size":620
},
{
"type": "CSS",
"source": "../files/test.css",
"size": 16.819
},
{
"type":"TEXT",
"source":"../path/to/your/text.txt",
"size":44
},
{
"source": {
"svg": "../files/yin-yang.svg",
"fallback": "../files/yin-yang.jpg"
},
"type": "IMAGE",
"size": 2338
},
{
"type":"VIDEO",
"sources": {
"webm":{
"source":"../path/to/your/video.webm",
"size":5054.976
},
"ogg":{
"source":"../path/to/your/video.ogg",
"size":2932.736
},
"h264":{
"source":"../path/to/your/video.mp4",
"size":9285.632
},
"vp9": {
"source":"../path/to/your/video.webm",
"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
},
"opus": {
"source": "../path/to/your/audio.opus",
"size":2000.20
},
"wav": {
"source": "../path/to/your/audio.wav",
"size":2000.20
},
"m4a": {
"source": "../path/to/your/audio.m4a",
"size":2000.20
}
}
}
]
} 2 Import the plugin into your page:<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../js/jQuery.html5Loader.js"></script> 3 Initialize the plugin setting the callback functions:$.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 ) {}
}); APIMethods
Loading SegmentsIt is also possible to load groups of files in sequence by wrapping them in arrays. This could be handy if you need need to preload components with dependencies. e.g {
"files": [
[
{
"type":"SCRIPT",
"source":"../path/to/underscore.js",
"size":13.9
}
],
[
{
"source": "../path/to/backbone.js",
"type": "SCRIPT",
"size": 37.5
},
{
"source": "../path/to/three.js",
"type": "SCRIPT",
"size": 150.3
}
]
]
} Loading SVGsYou can also load SVG files providing a fallback image. jQuery.html5Loader will detect automatically if the device supports the SVGs otherwise it will just preload the fallback image. "files":[
{
"source": {
"svg": "../files/yin-yang.svg",
"fallback": "../files/yin-yang.jpg"
},
"type": "IMAGE",
"size": 2338
}
] KNOWN ISSUES
TODO List
CHANGELOGv1.8.0
v1.7.0
v1.6.9
v1.6.8
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论