A simple Javascript library for preload image and audio. The main feature:
- set concurrency
- set minimum loading time per resouce, for simulate slow load
npm install --save preloader.js
Import
var Preloader = require('preloader.js')
Execute
var preloader = new Preloader({
resources: ['assert/images/logo.png', 'assert/audios/bg.mp3'],
concurrency: 4
})
preloader.addProgressListener(function (loaded, length) {
console.log('loading ', loaded, length, loaded / length)
})
preloader.addCompletionListener(function () {
console.log('load completed')
})
preloader.start()
PS: If no use module bundler (e.g.: webpack、browserify), you can direct reference
<script src="src/preloader.js"></script>
-
resources
Array
Default:
[]
.Preload resouce list. The files of postfix belong to
['mp3', 'ogg', 'wav']
to according audio handle.PS:Resources in addition to here configuration, including configured
attr
value DOM node. -
concurrency
Number
Default:
0
.Concurrent number. 0 is no concurrency limit.
-
perMinTime
Number
Default:
0
. Unit:ms
Minimum loading time per resouce. Usually used to simulate load slow.
-
attr
String
Default:
data-preload
.DOM node attribute. Example:
<img src="img/logo.png" data-preload/>
, the'img/logo.png'
will been added inresources
. -
crossOrigin
Boolean
Default:
false
.If set to
true
, which will set the crossOrigin property on images toAnonymous
for support images loaded from a CORS-enabled server. -
onProgress
Function
Default:
null
.Every resouce load is completed the callback function. The effect same to
addProgressListener
. -
onCompletion
Function
Default:
null
.All resouces load is completed the callback function. The effect same to
addCompletionListener
.
addProgressListener(Function)
Set every resouce load is completed the callback function
addCompletionListener(Function)
Set all resouces load is completed the callback function
get(String)
Get instances of completed
start()
Begin load. All ready after invoke.
MIT