@nd0ut/ubiquitous-guacamole

Ubiquitous Guacamole

Perhaps the best image preloader on Earth.

Demo

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]>>

loadImages.State

• COMPLETELY_AVAILABLE string('completely_available') Image loading success (w3c)
• BROKEN string('broken') Image loading failed (w3c)