https://github.com/huruji/assets-preloader
load web assets, like js, css, image, and return a promise
https://github.com/huruji/assets-preloader
Last synced: 8 months ago
JSON representation
load web assets, like js, css, image, and return a promise
- Host: GitHub
- URL: https://github.com/huruji/assets-preloader
- Owner: huruji
- Created: 2019-03-22T05:07:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:29:53.000Z (almost 3 years ago)
- Last Synced: 2025-03-24T14:01:34.138Z (9 months ago)
- Language: TypeScript
- Size: 1.46 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-github-star - assets-preloader
README
# assets-preloader
load web assets, like js, css, image, and return a promise
> notice: assets-preloader only support image assets now, other assets will be as features in next version
## example
see [Example](./example/README.md)
## How to use
```bash
npm i assets-preloader -S
```
```js
import Preloader from 'assets-preloader'
const imgs = [
// your imgs
// like 'http://assets-preload.io/logo.png'
]
const loader = new Preloader(imgs)
loader.listen('progress', (val) => {
// your code when progress events emited
// like: console.log(val)
})
// start load
loader.load().then(() => {
// your code when all assets loaded
// like console.log('success')
})
```
## Api
`Preloader` is a class, so you need init an instance
```js
const loader = new Preloader(assets)
```
### `.load`
start to load assets, it returns a `promise`
```js
loader.load().then(() => {
// your code
})
```
### `.listen`
listen `progress` or `error` events
```js
loader.listen('progress', (val) => {
console.log(`Loading progress is ${val}`)
})
```
### `.addEventListener`
`alias` of `.listen`
### `.add`
add asset to load
```js
loader.add('myasset.png')
```
## Events
### progress
Emited when asset loading completed, it's parameter is a progress number
### error
Emited when asset loading error, it's parameter is an `Error`
**Listening event**: you can use `onprogress` or `listen` or `addEventListener`
```js
loader.listen('progress', (val) => {
// your code when progress events emited
// like: console.log(val)
})
// equal to
loader.addEventListener('progress', (val) => {
// your code when progress events emited
// like: console.log(val)
})
// equal to
loader.onprogress = (val) => {
// your code when progress events emited
// like: console.log(val)
}
```
## How to build
```js
npm run build
```
## How to release
`assets-preloader` is using `standard-version`
```bash
# release as a major version
npm run release:major
#release as a major version
npm run release:minor
#release as a patch version
npm run release:patch
```