xhr-image

XHR-driven Images for progress events

Usage no npm install needed!

<script type="module">
  import xhrImage from 'https://cdn.skypack.dev/xhr-image';
</script>

README

xhr-image

XHR-driven Image for progress events.

Installation

Install with component(1):

$ component install component/xhr-image

Example

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