https://github.com/component/xhr-image

XHR2 driven images for progress events
https://github.com/component/xhr-image

Last synced: 10 months ago
JSON representation

XHR2 driven images for progress events

• Host: GitHub
• URL: https://github.com/component/xhr-image
• Owner: component
• Created: 2013-06-28T21:41:16.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2014-04-22T04:16:19.000Z (almost 12 years ago)
• Last Synced: 2024-05-08T17:06:20.371Z (almost 2 years ago)
• Language: JavaScript
• Size: 129 KB
• Stars: 39
• Watchers: 13
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

          

# xhr-image

  XHR-driven `Image` for progress events to make pretty progress indicators when loading images.

## Installation

  Install with [component(1)](http://component.io):

    $ component install component/xhr-image

## Example

```js

var XHRImage = require('xhr-image');

var img = new XHRImage('http://i.cloudup.com/0chKjveyrS.png');

img.on('progress', function(e){

  progress.style.width = (e.percent | 0) + '%';

});

img.on('load', function(){

  var el = new Image;

  el.src = URL.createObjectURL(img.xhr.response);

  document.body.appendChild(el);

});

```

## Events

 - `open`

 - `sent`

 - `receiving`

 - `load`

 - `progress`

## API

### Image(src)

  Request the given img `src`.

### .xhr

  The XHR request.

### .abort()

  Abort the request.

## License

  MIT