react-lazy-load-image-component

What is react-lazy-load-image-component?

The react-lazy-load-image-component package is a React component that provides lazy loading functionality for images. It helps improve performance by loading images only when they are in the viewport, reducing the initial load time and bandwidth usage.

What are react-lazy-load-image-component's main functionalities?

Basic Lazy Loading

This feature allows you to lazy load an image with a blur effect. The image will only load when it comes into the viewport, improving performance.

import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

const App = () => (
  <LazyLoadImage
    alt={'Image Alt Text'}
    height={200}
    src={'https://example.com/image.jpg'} // use normal <img> attributes as props
    width={200}
    effect='blur'
  />
);

Placeholder Image

This feature allows you to specify a placeholder image that will be displayed while the main image is loading. This can enhance the user experience by providing a visual cue that an image is being loaded.

import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

const App = () => (
  <LazyLoadImage
    alt={'Image Alt Text'}
    height={200}
    src={'https://example.com/image.jpg'}
    width={200}
    placeholderSrc={'https://example.com/placeholder.jpg'}
    effect='blur'
  />
);

Custom Placeholder

This feature allows you to use a custom React component as a placeholder while the main image is loading. This provides more flexibility in designing the loading state.

import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

const App = () => (
  <LazyLoadImage
    alt={'Image Alt Text'}
    height={200}
    src={'https://example.com/image.jpg'}
    width={200}
    placeholder={<div style={{ height: 200, width: 200, backgroundColor: '#ccc' }}>Loading...</div>}
    effect='blur'
  />
);

Other packages similar to react-lazy-load-image-component

react-lazyload

react-lazyload is another popular package for lazy loading components and images in React. It provides a higher-order component and a hook for lazy loading, and it supports features like debounce and throttle. Compared to react-lazy-load-image-component, it offers more general-purpose lazy loading capabilities but may require more setup for image-specific use cases.

react-intersection-observer

react-intersection-observer is a React implementation of the Intersection Observer API, which can be used to lazy load images and other components. It provides a hook and a render prop for observing when elements enter or leave the viewport. This package is more flexible and can be used for a variety of lazy loading scenarios, but it requires more manual setup for image-specific use cases compared to react-lazy-load-image-component.

react-lazy-load

react-lazy-load is a simple React component for lazy loading images and other components. It provides basic lazy loading functionality with minimal configuration. While it is easy to use, it lacks some of the advanced features like custom placeholders and effects that react-lazy-load-image-component offers.

README

React Lazy Load Image Component

React Component to lazy load images using a HOC to track window scroll position.

Features

• Two components: a HOC to track the scroll position and a component to render the image.
• Handles scroll events, resize events and re-renders that might change the position of the components.
• Placeholder by default with the same size of the image.
• A custom placeholder and threshold can be specified.
• beforeLoad and afterLoad events.
• Accepts all standard <img> attributes.
• No dependencies other than react and react-dom.

Installation

1. Install react-lazy-load-image-component as a dependency:

# Yarn
$ yarn add react-lazy-load-image-component

# NPM
$ npm i --save react-lazy-load-image-component

1. Import the LazyLoadImage component:

import { LazyLoadImage } from 'react-lazy-load-image-component'

1. Import the trackWindowScroll HOC:

import { trackWindowScroll } from 'react-lazy-load-image-component'

Usage

import React from 'react';
import { LazyLoadImage, trackWindowScroll }
  from 'react-lazy-load-image-component';

const Gallery = ({ images, scrollPosition }) => (
  <div>
    {images.map((image) =>
      <LazyLoadImage
        key={image.key}
        alt={image.alt}
        height={image.height}
        scrollPosition={scrollPosition} // pass the scrollPosition
        src={image.src} // use normal <img> attributes as props
        width={image.width} />
    )}
  </div>
);
// Wrap Gallery with trackWindowScroll HOC so it receives
// a scrollPosition prop to pass down to the images
export default trackWindowScroll(Gallery);

Props

Prop	Type	Description
scrollPosition	Object	Object containing x and y with the curent window scroll position. Required.
afterLoad	Function	Function called after the image has been rendered.
beforeLoad	Function	Function called right before the image is rendered.
placeholder	ReactClass	A React element to use as a placeholder.
threshold	Number	Threshold in pixels. So the image starts loading before it appears in the viewport. Defaults to 100.
...		Any other image attribute

Screenshot

Get the full code of this example.