Load an image and return a promise in the browser, in 0.3KB, no dependencies
npm install --save image-promise
import loadImage from 'image-promise';
If you don't use node/babel, include this:
<script src="dist/image-promise.browser.js"></script>
It uses the ES2015 window.Promise
, so if you need to support older browsers (IE<=11) you need a polyfill.
loadImage( '/cat.jpg' );
// Returns a Promise that resolves with an image (`<img>`)
loadImage( ['/cat.jpg', '/dog.png'] );
// Returns a Promise that resolves with **an array of images.**
loadImage( document.querySelector('img') ); // one element
loadImage( document.querySelectorAll('img') ); // any Array-like list of elements
// The promises resolve when the provided <img>s are loaded
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']) // array of URLs
.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 :(');
});
If you pass image URLs (first two examples), image-promise
will caches the generated <img>
tags so successive calls with the same exact src
string will return the same <img>
tag and will be resolved at the same time as the first one.
Because the <img>
are cached internally, if you want to uncache and unload them from memory, call the unload
method on the same src
:
loadImage.unload('img.jpg'); // like with loadImage(), you can also pass an array of URLs or elements
None! But you need to polyfill window.Promise
in IE<=11
MIT © Federico Brigante