image-promise

image-promise

Load an image and return a promise in the browser, in 0.3KB, no dependencies

It can be used in two ways:

• given a URL, generate an <img> and wait for it to load:

  loadImage('img.jpg').then(/*it's loaded!*/)
  

• given an <img>, wait for it to load:

  const img = document.querySelector('img.my-image');
  loadImage(img).then(/*it's loaded!*/)
  

Install

Pick your favorite:

<script src="dist/image-promise.min.js"></script>

npm install --save image-promise

var loadImage = require('image-promise');

import loadImage from 'image-promise';

Usage

loadImage( '/cat.jpg' ); // one string
loadImage( document.querySelector('img') ); // one element
// Returns a Promise that resolves with an image (`<img>`)

loadImage( ['/cat.jpg', '/dog.png'] ); // Array of strings
loadImage( document.querySelectorAll('img') ); // any Array-like list of elements
// Returns a Promise that resolves with **an array of images.**

The promises resolve when the provided <img>s are loaded.

Examples

Load one image:

loadImage('cat.jpg')
.then(function (img) {
	ctx.drawImage(img, 0, 0, 10, 10);
})
.catch(function () {
	console.error('Image failed to load :(');
});

Load multiple images

loadImage(['/cat.jpg', '/dog.png'])
.then(function (allImgs) {
	console.log(allImgs.length, 'images loaded!', allImgs);
})
.catch(function (firstImageThatFailed) {
	// it fails fast like Promise.all 
	// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all#Promise.all_fail-fast_behaviour
	console.error('One or more images have failed to load :(');
});

Dependencies

None! But you need to polyfill window.Promise in IE11 and lower.

License

MIT © Federico Brigante