react-use-lazy-load-image 🌅 ⚡
Add image lazy loading to your React app with ease
react-use-lazy-load-image uses the IntersectionObserver to provide a performant solution to lazy loading images that doesn't involve scroll event listeners. The IntersectionObserver API is still quite new so older browsers may not support this, however there are some good polyfills available for these use cases.
react-use-lazy-load-image is super light weight so won't add any extra bulk to your app.
As the name suggests react-use-lazy-load-image uses React Hooks, so you need to be using React function components to use this library.
Usage
- Add a
data-img-srcattribute (you can customise this) to yourimgtags as your main image source - Change the
srcattribute to a placeholder like a small data URL blob - Import and run
useLazyLoadImagein the body of your React function component
Now as your users scroll down the page the images will load just in time.
Arguments
| Argument name | Default value | Description |
|---|---|---|
| imageAttribute | '[data-img-src]' |
The query passed to document.querySelectorAll to grab all lazy load-able images on the page |
| imageAttributeKey | 'imgSrc' |
The camel-cased key to pull the data-img-src out of the image element |
| rootMargin | '200px 0px' |
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options |
| threshold | 0.01 |
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options |
| debug | false |
When set to true some useful messages will get logged to the console |
| dependencies | [] |
React useEffect dependency array, used for re-running this logic if the component re-renders and the img references change (read more about conditionally firing an effect) |
Example
import React from 'react';
import useLazyLoadImage from 'react-use-lazy-load-image';
function App() {
useLazyLoadImageReact();
return (
<div>Lots of content that means the image is off screen goes here</div>
<img src="DATA URL" data-img-src="https://link-to-my-image.com/image.png" alt="My image" />
)
}