Ubiquitous Guacamole
Perhaps the best image preloader on Earth.
Installation
Just run
npm i @nd0ut/ubiquitous-guacamole --save
or
yarn add @nd0ut/ubiquitous-guacamole
Usage
import loadImages from '@nd0ut/ubiquitous-guacamole';
loadImages(['urls', 'or', 'HTMLImageElements'])
.then(images => {
// all images are successfully loaded
const [img, state] = images[0];
console.log(state); // prints 'completely_available'
state === loadImages.State.COMPLETELY_AVAILABLE
}
.catch(images => {
// at least one image is failed
const [img, state] = images[0];
console.log(state); // prints 'completely_available' or 'broken'
state === loadImages.State.COMPLETELY_AVAILABLE || state === loadImages.State.BROKEN
});
HTMLImageElement can be in any state (according to w3c spec), but keep in mind that if you never set the src property then the promise will never be resolved or rejected. There is no any timeout on this.
API
loadImages (default export)
Parameters
-
input
Array<(string | HTMLImageElement)> Array of urls or Images
Returns Promise<Array<[HTMLImageElement, loadImages.State]>>