lesca-image-onload

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