A wrapper for loading image via XHR and dispatching progress events.
With npm:
npm i image-progress --save
With Component(1):
component install ayamflow/image-progress
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.
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).
Starts the loading. It will fire a start
event.
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.
Callbacks to be called when the appropriate events are fired.
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.
The number of decimals in the event.progress
property.
Set wether the destroy
method should be automatically called after a complete
or error
event.
Uses jsonp in order to bypass CORS restrictions
start
: fired when the loading starts. The event contains a reference to theoptions
hash, as well as theurl
.progress
: fired each time the XHR request updates. The event has 3 properties:loaded
,total
andprogress
.complete'
: fired when the loading is complete. The event contains a reference to theoptions
hash, as well as theurl
.error
: fired when a network-related error is raised.