Smart react lazy load image with IntersectionObserver API
React lazy load images with IntersectionObserver API and Priority Hints.
React Simple Img
Smart react lazy load image with IntersectionObserver API, Priority Hints and animations :clap:
- Speed up initial page loads by loading only images above the fold
- Responsive with placeholders and animations
- Support Priority Hints with importance attribute
- Smart download logic using IntersectionObserver
- Simple usage and tiny size includes polyfill (minified + gzipped)
Install
npm install react-simple-img
Quickstart
import { SimpleImg } from 'react-simple-img';
export default () => <SimpleImg height={500} src="your image path" />;