Home
Categories
Loading
React Lazy Load Image Component with Custom Placeholders

React Lazy Load Image Component with Custom Placeholders

zenui-labs First listed on October 27, 2025
Live Demo Download Source Code

Description:

ZenUI Image React is a React component that lazy loads images with a focus on performance and customization.

It defers the loading of off-screen images until they are about to enter the user’s viewport.

This component supports various placeholder types, transition effects, and automatic generation of responsive image attributes.

Features

  • 🖼 Placeholder Support: Offers multiple placeholder options including effects, custom images, or components while the main image loads.
  • 🎨 Effect Transitions: Provides smooth loading transitions such as blur, opacity, or color effects.
  • 📱 Responsive Images: Automatically generates srcset and sizes attributes for optimized image delivery across different devices.
  • âš¡ Performance Optimized: Employs the Intersection Observer API for efficient lazy loading without blocking the main thread.
  • 🛠 Highly Customizable: Exposes a wide range of props to control placeholder types, transition effects, loading offsets, and more.

Use Cases

  • Image Galleries: Efficiently load images in a gallery as the user scrolls, improving initial page load and saving bandwidth.
  • E-commerce Product Listings: On product listing pages with numerous images, load product images only as they become visible to the user.
  • Blog Posts and Articles: For long-form content with embedded images, defer image loading to speed up the initial rendering of the text content.
  • User-Generated Content Feeds: In social media or community platforms, lazy load images in user posts to handle potentially infinite scrolling feeds efficiently.

How to Use It

1. Install the package from npm.

npm install zenui-image-react

2. Import the LazyLoadImage component into your React component file.

import { LazyLoadImage } from 'zenui-image-react';

3. Basic usage. You can also specify a placeholder effect, such as a blur transition.

function MyComponent() {
  return (
    <LazyLoadImage
      src="https://example.com/your-image.jpg"
      alt="A descriptive alt text"
      placeholderType="effect"
      effectType="blur"
    />
  );
}

4. You can customize the placeholder. The library supports an effect, a separate image, or a custom React component. For a custom image placeholder, set placeholderType to image and provide the placeholderImage URL.

<LazyLoadImage
  src="https://example.com/your-image.jpg"
  alt="A descriptive alt text"
  placeholderType="image"
  placeholderImage="path/to/low-quality-placeholder.jpg"
/>

5. To use a custom component as a placeholder, such as a loading spinner, set placeholderType to custom and pass your component to the customPlaceholder prop.

const CustomSpinner = () => <div>Loading...</div>;
<LazyLoadImage
  src="https://example.com/your-image.jpg"
  alt="A descriptive alt text"
  placeholderType="custom"
  customPlaceholder={<CustomSpinner />}
/>

6. For performance, the component can automatically generate responsive image attributes. Enable this by setting the optimize prop to true. You can also specify image quality and custom breakpoints.

<LazyLoadImage
  src="image.jpg"
  alt="A descriptive alt text"
  optimize
  quality={75}
  breakpoints={{
    sm: 640,
    md: 768,
    lg: 1024,
  }}
  imageWidths={{
    sm: [640],
    md: [768],
    lg: [1024]
  }}
/>

7. All component props.

  • src: The source URL for the image. This prop is required.
  • alt: Provides alternative text for the image for accessibility.
  • className: Assigns a CSS class to the component’s root element.
  • style: Applies inline CSS styles to the component.
  • placeholderType: Determines the type of placeholder to display while the image is loading. Options are 'none', 'effect', 'image', or 'custom'.
  • effectType: Specifies the visual effect for the 'effect' placeholder. Options include 'blur', 'opacity', or 'color'.
  • effectAmount: Controls the intensity of the selected effectType.
  • placeholderImage: The URL for a custom image to be used as a placeholder when placeholderType is 'image'.
  • customPlaceholder: Accepts a React element to be used as a placeholder when placeholderType is 'custom'.
  • optimize: When set to true, it enables automatic generation of srcset and sizes attributes for responsive images.
  • quality: An integer from 1 to 100 that sets the image quality when optimize is enabled.
  • breakpoints: An object defining custom screen size breakpoints for responsive image loading.
  • imageWidths: An object that specifies the image widths to be used at the defined breakpoints.
  • sizes: A string for the sizes attribute of the image, allowing for more control over responsive image selection.
  • useIntersectionObserver: A boolean to enable or disable the use of the Intersection Observer API for lazy loading.
  • offset: A number that defines a pixel margin around the viewport to trigger image loading sooner or later.
  • onLoad: A callback function that executes when the image has successfully loaded.
  • onError: A callback function that executes if the image fails to load.

Related Resources

  • react-lazy-load-image-component: A popular React component for lazy loading images and other components with support for IntersectionObserver.
  • lazysizes: A high-performance, SEO-friendly lazy loader for images, iframes, and more, that works with vanilla JavaScript.
  • vanilla-lazyload: A lightweight script to lazy load images, videos, and iframes, which leverages IntersectionObserver and supports responsive images.

FAQs

Q: Can I use this component for elements other than images?
A: ZenUI Image React is specifically designed for <img> elements and does not support lazy loading for other types of components or elements.

Q: How are responsive images generated?
A: When the optimize prop is enabled, the component automatically creates a srcset attribute with different image widths based on the provided breakpoints and imageWidths configuration. This allows the browser to select the most appropriate image size for the user’s device.

Q: Can I control when the image starts loading?
A: Yes, you can use the offset prop to define a margin around the viewport. A positive value will trigger the image load before it enters the viewport, while a negative value will delay it until it is further inside.

Tags:

More Like This

Add Comment