Why use it?

Progress and timing provided for loading and animation.

Live Demo

codesandbox.io

Installation

npm install lesca-react-onload --save

Usage

import OnloadProvider from 'lesca-react-onload';

export default function () {

  const onStep = (e) => {
    const {loaded, total} = e;
    const percent = loaded / total * 100;
    console.log(percent) // get loading percent
  }

  const onload = (e) => {
    // all image loaded
  }

  return (
    <OnloadProvider hideBeforeLoaded onStep={onStep} onload={onload}>
      <img src='./myImage.jpg'>
      <div style={{ backgroundImage: 'url(./myBackgroundImage.jpg)' }} />
    </OnloadProvider>
  );
};

Properties

Properties	description	default
hideBeforeLoaded:boolean	hide DOM before loaded	true
onStep:function	call when each image loaded
onload:function	call when all image loaded

args

args	description
loaded:number	target image loaded number
total:number	target image total number
index:number	target image load index
url:string	target url

Features

• maintain if necessary