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