1.0.17 • Published 13 days ago
lesca-react-onload v1.0.17
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