Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/o2team/elf-preloader.js
A simple Javascript library for preload image and audio
https://github.com/o2team/elf-preloader.js
Last synced: about 2 months ago
JSON representation
A simple Javascript library for preload image and audio
- Host: GitHub
- URL: https://github.com/o2team/elf-preloader.js
- Owner: o2team
- License: mit
- Created: 2016-11-23T08:50:53.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:27:37.000Z (almost 2 years ago)
- Last Synced: 2024-11-05T13:49:23.823Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 165 KB
- Stars: 57
- Watchers: 10
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# preloader.js [![NPM version][npm-version-image]][npm-version-url]
[中文说明](https://github.com/o2team/elf-preloader.js/blob/master/README_CN.md)
A simple Javascript library for preload image and audio. The main feature:
- set concurrency
- set minimum loading time per resouce, for simulate slow load
## Install
```
npm install --save preloader.js
```
## Usage
Import
```
var Preloader = require('preloader.js')
```
Execute
```javascript
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
```
```
## Introduce
### configuration
- **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: `
`, the `'img/logo.png'` will been added in `resources`.
- **crossOrigin** `Boolean`
Default: `false`.
If set to `true`, which will set the crossOrigin property on images to `Anonymous` 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`.
### instance method
**`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.
## License
MIT
[npm-version-image]: https://img.shields.io/npm/v/preloader.js.svg?style=flat-square
[npm-version-url]: https://www.npmjs.com/package/preloader.js