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

:zap: Live demo

:wrench: Demo in codesandbox

Install

yarn add react-lazy-img or npm i react-lazy-img

Simple example

1import Img from `react-lazy-img`;
2
3// ...
4
5<Img src="/path/to/img.png" width={200} height={100} />

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

1import Img from `react-lazy-img`;
2
3// ...
4
5<Img
6  src="/path/to/img.png"
7  width={200}
8  height={100}
9  offset={1000}
10  fallback={() => <img src="/path/to/low-res-img.png" />}
11  transition="opacity 1s ease-in"
12/>

• offset - number: distance to viewport to start loading
• fallback - () => React.Node: result of this function will be rendered while not loaded
• transition - string: CSS Transition property

Special thanks

@fdaciuk for kindly transferring npm package name ownership

License

MIT