react-lazy-img
Very simple drop in replacement of <img>
with lazy loading (images outside the viewport won't be loaded) and fade-in transition.
No frills, it just works.
Uses IntersectionObserver
under the hood (can be polyfilled). If not available, image will be shown as is.
Demo
⚡️ Live demo
Install
yarn add react-lazy-img
or npm i react-lazy-img
Simple example
import Img from `react-lazy-img`; // ... <Img ="/path/to/img.png" = = />
Image will start loading when its distance to the viewport is less than 500px (can be configured). Once loaded, it will fade in (by default 0.3s ease-in
, can be configured).
width
and height
props are optional but recommended to avoid browser reflows.
You can pass any standard <img>
attribute.
Full featured example
import Img from `react-lazy-img`; // ... <Img ="/path/to/img.png" = = = = ="opacity 1s ease-in"/>
offset
- number: distance to viewport to start loadingfallback
- () => React.Node: result of this function will be rendered while not loadedtransition
- string: CSS Transition property
Special thanks
@fdaciuk for kindly transferring npm package name ownership
License
MIT