Why use it?

a listener for load images of DOM.

Live Demo

Installation

npm install lesca-image-onload --save

Usage

import ImageOnload from 'lesca-image-onload';

new ImageOnload()
  .load(containerRef.current, {
    hideBeforeLoaded: true,
    onUpdate: (e) => {
      const { loaded, total } = e;
      const percent = (loaded / total) * 100; // 0~9x
    },
  })
  .then((e) => {
    const { loaded, total } = e;
    const percent = (loaded / total) * 100; // 100
  });

Development

Methods

| method | description | return | | :--------------------------------------------------------- | :-------------------: | ------: | | .constructor() | new class | class | | .load(dom:DOM, options:object) | Load HTML node images | Promise |

options

| Properties | description | return | | :----------------------------- | :-----------------------------------: | -----------------------------------------------------------------------: | | onUpdate:function | callback for each image onload | { url:string, index:int, total:int, loaded:int } | | hideBeforeLoaded:boolean | set root node style display to 'none' | default = true |

Features

• add React hook
• maintain if necessary