Gathering detailed insights and metrics for react-lazy-load-image-component
Gathering detailed insights and metrics for react-lazy-load-image-component
Gathering detailed insights and metrics for react-lazy-load-image-component
Gathering detailed insights and metrics for react-lazy-load-image-component
@types/react-lazy-load-image-component
TypeScript definitions for react-lazy-load-image-component
@dcasia/react-lazy-load-image-component-improved
React Component to lazy load images using a HOC to track window scroll position.
loadable-image
React Component to lazy load images
@helaoutar/react-lazy-load-image
React Lazy load image component
React Component to lazy load images and components using a HOC to track window scroll position.
npm install react-lazy-load-image-component
Typescript
Module System
Node Version
NPM Version
97.4
Supply Chain
99.5
Quality
79
Maintenance
100
Vulnerability
99.3
License
JavaScript (95.09%)
CSS (2.56%)
TypeScript (2.35%)
Total Downloads
33,268,222
Last Day
7,398
Last Week
229,340
Last Month
897,397
Last Year
9,594,678
MIT License
1,520 Stars
142 Commits
114 Forks
7 Watchers
4 Branches
19 Contributors
Updated on Jul 04, 2025
Minified
Minified + Gzipped
Latest Version
1.6.3
Package Id
react-lazy-load-image-component@1.6.3
Unpacked Size
93.13 kB
Size
22.85 kB
File Count
30
NPM Version
10.8.2
Node Version
22.6.0
Published on
Dec 16, 2024
Cumulative downloads
Total Downloads
Last Day
-2.4%
7,398
Compared to previous day
Last Week
3.3%
229,340
Compared to previous week
Last Month
2.2%
897,397
Compared to previous month
Last Year
15.6%
9,594,678
Compared to previous year
2
1
React Component to lazy load images and other components/elements. Supports IntersectionObserver and includes a HOC to track window scroll position to improve performance.
"An easy-to-use performant solution to lazy load images in React"
LazyLoadImage
and LazyLoadComponent
) and a HOC (trackWindowScroll
) which adds scroll position tracking to any component you wish.beforeLoad
and onLoad
events.debounce
and throttle
included by default and configurable.We built several examples and components on top of react-lazy-load-image-component to safe you time. Check them out on LazyPixels.com.
1# Yarn 2$ yarn add react-lazy-load-image-component 3 4# NPM 5$ npm i --save react-lazy-load-image-component
LazyLoadImage
usage1import React from 'react'; 2import { LazyLoadImage } from 'react-lazy-load-image-component'; 3 4const MyImage = ({ image }) => ( 5 <div> 6 <LazyLoadImage 7 alt={image.alt} 8 height={image.height} 9 src={image.src} // use normal <img> attributes as props 10 width={image.width} /> 11 <span>{image.caption}</span> 12 </div> 13); 14 15export default MyImage;
Prop | Type | Default | Description |
---|---|---|---|
onLoad | Function | Function called when the image has been loaded. This is the same function as the onLoad of an <img> which contains an event object. | |
afterLoad | Function | Deprecated, use onLoad instead. This prop is only for backward compatibility. | |
beforeLoad | Function | Function called right before the placeholder is replaced with the image element. | |
delayMethod | String | throttle | Method from lodash to use to delay the scroll/resize events. It can be throttle or debounce . |
delayTime | Number | 300 | Time in ms sent to the delayMethod. |
effect | String | Name of the effect to use. Please, read next section with an explanation on how to use them. | |
placeholder | ReactClass | <span> | React element to use as a placeholder. |
placeholderSrc | String | Image src to display while the image is not visible or loaded. | |
threshold | Number | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |
useIntersectionObserver | Boolean | true | Whether to use browser's IntersectionObserver when available. |
visibleByDefault | Boolean | false | Whether the image must be visible from the beginning. |
wrapperClassName | String | In some occasions (for example, when using a placeholderSrc) a wrapper span tag is rendered. This prop allows setting a class to that element. | |
wrapperProps | Object | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) |
... | Any other image attribute |
LazyLoadImage
includes several effects ready to be used, they are useful to add visual candy to your application, but are completely optional in case you don't need them or want to implement you own effect.
They rely on CSS and the corresponding CSS file must be imported:
1import React from 'react'; 2import { LazyLoadImage } from 'react-lazy-load-image-component'; 3import 'react-lazy-load-image-component/src/effects/blur.css'; 4 5const MyImage = ({ image }) => ( 6 <LazyLoadImage 7 alt={image.alt} 8 effect="blur" 9 wrapperProps={{ 10 // If you need to, you can tweak the effect transition using the wrapper style. 11 style: {transitionDelay: "1s"}, 12 }} 13 src={image.src} /> 14);
The current available effects are:
blur
: renders a blurred image based on placeholderSrc
and transitions to a non-blurred one when the image specified in the src is loaded.black-and-white
: renders a black and white image based on placeholderSrc
and transitions to a colorful image when the image specified in the src is loaded.opacity
: renders a blank space and transitions to full opacity when the image is loaded.All the effects have a transition duration of 0.3 seconds by default, without transition delay and the default transition timing function. All those values can be modified overriding the wrapper style as shown in the code example above.
LazyLoadComponent
usage1import React from 'react'; 2import { LazyLoadComponent } from 'react-lazy-load-image-component'; 3import { ArticleContent, ArticleComments } from 'my-app'; 4 5const Article = ({ articleId }) => ( 6 <div> 7 <ArticleContent id={articleId} /> 8 <LazyLoadComponent> 9 <ArticleComments id={articleId} /> 10 </LazyLoadComponent> 11 </div> 12); 13 14export default Article;
Prop | Type | Default | Description |
---|---|---|---|
afterLoad | Function | Function called after the component has been rendered. | |
beforeLoad | Function | Function called right before the component is rendered. | |
delayMethod | String | throttle | Method from lodash to use to delay the scroll/resize events. It can be throttle or debounce . |
delayTime | Number | 300 | Time in ms sent to the delayMethod from lodash. |
placeholder | ReactClass | <span> | React element to use as a placeholder. |
threshold | Number | 100 | Threshold in pixels. So the component starts loading before it appears in the viewport. |
useIntersectionObserver | Boolean | true | Whether to use browser's IntersectionObserver when available. |
visibleByDefault | Boolean | false | Whether the component must be visible from the beginning. |
trackWindowScroll
HOC to improve performanceWhen you have many elements to lazy load in the same page, you might get poor performance because each one is listening to the scroll/resize events. In that case, it's better to wrap the deepest common parent of those components with a HOC to track those events (trackWindowScroll
).
For example, if we have an App
which renders a Gallery
, we would wrap the Gallery
component with the HOC.
1import React from 'react'; 2import { LazyLoadImage, trackWindowScroll } 3 from 'react-lazy-load-image-component'; 4 5const Gallery = ({ images, scrollPosition }) => ( 6 <div> 7 {images.map((image) => 8 <LazyLoadImage 9 key={image.key} 10 alt={image.alt} 11 height={image.height} 12 // Make sure to pass down the scrollPosition, 13 // this will be used by the component to know 14 // whether it must track the scroll position or not 15 scrollPosition={scrollPosition} 16 src={image.src} 17 width={image.width} /> 18 )} 19 </div> 20); 21// Wrap Gallery with trackWindowScroll HOC so it receives 22// a scrollPosition prop to pass down to the images 23export default trackWindowScroll(Gallery);
You must set the prop scrollPosition
to the lazy load components. This way, they will know the scroll/resize events are tracked by a parent component and will not subscribe to them.
LazyLoadImage
Prop | Type | Default | Description |
---|---|---|---|
scrollPosition | Object | Object containing x and y with the curent window scroll position. Required. | |
onLoad | Function | Function called when the image has been loaded. This is the same function as the onLoad of an <img> which contains an event object. | |
afterLoad | Function | Deprecated, use onLoad instead. This prop is only for backward compatibility. | |
beforeLoad | Function | Function called right before the image is rendered. | |
placeholder | ReactClass | <span> | React element to use as a placeholder. |
threshold | Number | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |
visibleByDefault | Boolean | false | Whether the image must be visible from the beginning. |
wrapperProps | Object | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) |
... | Any other image attribute |
Component wrapped with trackWindowScroll
(in the example, Gallery
)
Prop | Type | Default | Description |
---|---|---|---|
delayMethod | String | throttle | Method from lodash to use to delay the scroll/resize events. It can be throttle or debounce . |
delayTime | Number | 300 | Time in ms sent to the delayMethod from lodash. |
useIntersectionObserver | Boolean | true | Whether to use browser's IntersectionObserver when available. |
Notice you can do the same replacing LazyLoadImage
with LazyLoadComponent
.
visibleByDefault
?The prop visibleByDefault
makes the LazyLoadImage to behave like a normal <img>
. Why is it useful, then?
Imagine you are going to lazy-load an image you have already loaded in the same page. In that case, there is no need to lazy-load it because it's already stored in the cache of the user's browser. You can directly display it.
Maybe the following code snippet will make it more clear:
1import React from 'react'; 2import { LazyLoadImage, trackWindowScroll } 3 from 'react-lazy-load-image-component'; 4 5const Gallery = ({ images, scrollPosition }) => ( 6 <div> 7 // We are loading landscape.jpg here 8 <img src="/landscape.jpg" alt="Beautiful landscape" /> 9 {images.map((image) => 10 <LazyLoadImage 11 key={image.key} 12 alt={image.alt} 13 scrollPosition={scrollPosition} 14 src={image.src} 15 // If the image we are creating here has the same src than before, 16 // we can directly display it with no need to lazy-load. 17 visibleByDefault={image.src === '/landscape.jpg'} /> 18 )} 19 </div> 20); 21 22export default trackWindowScroll(Gallery);
This package loads images when they are visible in the viewport. Before an image is loaded, it occupies 0x0 pixels, so if you have a gallery of images, that means all images will be in the visible part of the page until the first ones load and start pushing down the other ones.
To fix this issue, make sure you either set a height
and width
props or a placeholder
to your images.
You need to import the effect CSS as shown in the Using effects code example.
Also, notice browsers might behave differently while images are loading. Some times, while an image is not completely loaded yet, the browser will show a white background behind it, making the effect not to be visible. This is an issue with browsers and not something that can be fixed in this package.
That warning might appear if there are two components using trackWindowScroll
at the same time. Notice it's not possible to have a LazyLoadImage/LazyLoadComponent inside another LazyLoadComponent for now. Also, make sure you are passing down scrollPosition
to all components wrapped inside trackWindowScroll
.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
Reason
SAST tool detected but not run on all commits
Details
Reason
6 existing vulnerabilities detected
Details
Reason
Found 7/30 approved changesets -- score normalized to 2
Reason
dependency not pinned by hash detected -- score normalized to 1
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More