relaze
Tiny image lazy loading library for React. 800 bytes gzipped.
Features
- Single higher-order component
- Performant scrolling using
requestAnimationFrame
- Supports
srcset
- Universal
Install
npm i relaze --save
Usage
Create a reusable image component:
// Image.js <img src=src srcSet=srcSet />
Pass it a src
and a srcSet
prop (optional):
<Image src='image.jpg' srcSet='image.jpg 600w, image-large.jpg 1200w' />
When the image enters the viewport, Relaze will pass the src
and srcSet
props to its child component.
Fade-in Image
// Image.js Component { superprops thisstate = loaded: false } { const loaded = thisstate const src srcSet = thisprops return <img src=src srcSet=srcSet className= onLoad= { this } /> } Image
Background Image
<div style= backgroundImage: `url()` />
Adjusting Threshold
A fraction of the viewport height. Positive values makes image load sooner, negative values makes image load later.
<Image src='image.jpg' threshold=02 />
License
MIT License © Eric Bailey