@bautrukevich/preload NPM

Preload

It's a small library for preload images in browser.

For what?

The problem

Large or a lot of image files may take a second or two to load on the page. Preloading those images early rather than later helps ensure that visitors have a great experience viewing your content.

The solution

JavaScript includes the Image among its native object types. The Image object represents an HTML image tag on the page and exposes the same properties and events. Perhaps oddly, the Image has no constructor that accepts an image source, so an image must be loaded into the object by setting its src attribute. Doing so causes the image to be downloaded from the server at that point.

Usage

Usage from npm

First of all you need to install it from npm using

yarn add @bautrukevich/preload

npm install @bautrukevich/preload --save

After you can import it and use like this:

import preload from '@bautrukevich/preload';
    
const IMAGE_URL = 'https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png';
const FAILED_IMAGE_URL = 'https://www.google.ru/images/branding/googlelogo/2x.jpg';
let orImageWithSrc = new Image();
let orImageWithoutSrc = new Image(); // it's valid and you can set src later

orImageWithSrc.src = IMAGE_URL;

// It would be resolved
preload(IMAGE_URL, orImageWithSrc).then(resolved => {
  console.log(resolved); // [[HTMLImageElement, 'loaded'], [HTMLImageElement, 'loaded']]
}, rejected => {
  console.log(rejected);
});

// It would be rejected
preload(orImageWithoutSrc).then(resolved => {
  console.log(resolved);
}, rejected => {
  console.log(rejected); // [[HTMLImageElement, 'new']]
});

// It would be rejected — if at least one image was not loaded
preload(IMAGE_URL, orImageWithoutSrc).then(resolved => {
  console.log(resolved);
}, rejected => {
  console.log(rejected); // [[HTMLImageElement, 'loaded'], [HTMLImageElement, 'new']]
});

// It would be rejected — if at least one image was not loaded
preload(FAILED_IMAGE_URL, orImageWithSrc).then(resolved => {
  console.log(resolved);
}, rejected => {
  console.log(rejected); // [[HTMLImageElement, 'failed'], [HTMLImageElement, 'loaded']]
});

preload function accept any number of arguments such as URL (string) or HTMLImageElement (new Image() or document.createElement('img')) and return Promise with [[source, 'state'], [source, 'state']...], where source — HTMLImageElement and state — state of his loading (can be 'new', 'loaded', 'failed').

Promise resolves if all images was loaded successfully and rejected if at least one not.