Repository files navigation

Add image lazy loading to your React app with ease

react-use-lazy-load-image uses theIntersectionObserver to provide a performant solution to lazy loading images that doesn't involve scroll event listeners. TheIntersectionObserver 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 suggestsreact-use-lazy-load-image uses React Hooks, so you need to be using React function components to use this library.

1. Add adata-img-src attribute (you can customise this) to yourimg tags as your main image source
2. Change thesrc attribute to a placeholder like a small data URL blob
3. Import and runuseLazyLoadImage in the body of your React function component

Now as your users scroll down the page the images will load just in time.

importReactfrom'react';importuseLazyLoadImagefrom'react-use-lazy-load-image';functionApp(){useLazyLoadImageReact();return(<div>Lots of content that means the image is off screen goes here</div><imgsrc="DATA URL"data-img-src="https://link-to-my-image.com/image.png"alt="My image"/>)}