https://github.com/ayamflow/image-progress
A wrapper for loading image via XHR and dispatching loading events.
https://github.com/ayamflow/image-progress
Last synced: 11 months ago
JSON representation
A wrapper for loading image via XHR and dispatching loading events.
- Host: GitHub
- URL: https://github.com/ayamflow/image-progress
- Owner: ayamflow
- Created: 2014-07-03T22:19:30.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2015-05-29T09:20:13.000Z (about 11 years ago)
- Last Synced: 2024-08-11T11:15:00.668Z (almost 2 years ago)
- Language: JavaScript
- Size: 191 KB
- Stars: 9
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
image-progress
=========
A wrapper for loading image via XHR and dispatching progress events.
## How to use
### 1. Install the plugin.
With npm:
```
npm i image-progress --save
```
With Component(1):
```
component install ayamflow/image-progress
```
### 2. Use
```javascript
var Progress = require('image-progress');
var img = new Progress('test-img.png');
img.on('error', function(event) {
console.log('there has been an error', event);
});
img.on('progress', function(event) {
console.log('The image is ' + event.progress * 100 + '% loaded !', event.loaded, event.total, event.progress);
});
img.on('complete', function(event) {
console.log('The image is loaded.');
});
img.on('start', function(event) {
console.log('The image with URL ' + event.url + ' has started loading');
});
img.load();
```
By default, the `event.progress` only has 2 decimals. You can set the number of decimals by passing the `leading` property as an instanciation option.
## Methods
* ### `new Progress(url, params)`
`url`: the URL for the image you want to load.
`params`: the params hash is used if you need to store & retrieve any property on the `start` & `complete` events. You can also pass different options there (see the options section below).
* ### `load()`
Starts the loading. It will fire a `start` event.
* ### `destroy()`
Removes all internal & external listeners, and clears the XHR object.
By default, this method is called after the `complete` and/or `error` events are triggered. you can disable this behavior by passing the `autoclear: false` as an instanciation option.
## Instanciation options
* ### `onStart`, `onError`, `onProgress`, `onComplete` (default: null)
Callbacks to be called when the appropriate events are fired.
* ### `autoload` (default: false)
Wether the loading should start automatically on instanciation. If you set it to `true`, be sure to also pass `onProgress`/`onComplete` callbacks as well or you won't be able to listen for completion.
* ### `leading` (default: 2)
The number of decimals in the `event.progress` property.
* ### `autoclear` (default: true)
Set wether the `destroy` method should be automatically called after a `complete` or `error` event.
* ### `jsonp` (default: false)
Uses [jsonp](http://en.wikipedia.org/wiki/JSONP) in order to bypass [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) restrictions
## Events
* `start`: fired when the loading starts. The event contains a reference to the `options` hash, as well as the `url`.
* `progress`: fired each time the XHR request updates. The event has 3 properties: `loaded`, `total` and `progress`.
* `complete'`: fired when the loading is complete. The event contains a reference to the `options` hash, as well as the `url`.
* `error`: fired when a network-related error is raised.
## Properties
* ### `total`: the total bytes to load
* ### `loaded`: the loaded bytes loaded
* ### `progress`: the loading progress, between 0 and 1