Load one or more images, return a promise. Only 0.4KB, for the browser, 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!*/)
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';
loadImage(image)
will return a Promise that resolves when the image load, or fails when the image
var image = 'cat.jpg';
// var image = $('img')[0]; // it can also be an <img> element
loadImage(image)
.then(function (img) {
ctx.drawImage(img, 0, 0, 10, 10);
})
.catch(function () {
console.error('Image failed to load :(');
});
image-promise
can load multiple images at a time
var images = ['cat.jpg', 'dog.jpg'];
// var images = $('img'); // it can also be a jQuery object
// var images = document.querySelectorAll('img'); // or a NodeList
loadImage(images)
.then(function (allImgs) {
console.log(allImgs.length, 'images loaded!', allImgs);
})
.catch(function (err) {
console.error('One or more images have failed to load :(');
console.error(err.errored);
console.info('But these loaded fine:');
console.info(err.loaded);
});
None! But you need to polyfill window.Promise
in IE11 and lower.
MIT © Federico Brigante