如何在react-image-gallery中实现懒加载及每次加载100张图片的图片画廊？

Hey there! Let's break down how to tackle your two requirements for react-image-gallery: batch loading 100 images at a time and implementing lazy loading. I’ve worked with this component quite a bit, so here’s a practical, step-by-step approach:

To load images in chunks of 100, you’ll need to manage your image data with state, and trigger loading the next batch when the user scrolls near the bottom of the gallery (or via a manual "Load More" button, which is a solid fallback).

Here’s a complete code example:

import React, { useState, useEffect } from 'react';
import ImageGallery from 'react-image-gallery';
import 'react-image-gallery/styles/css/image-gallery.css';

const BatchLoadedGallery = () => {
  // Replace this with your full list of images (format: [{original: 'image-url', thumbnail: 'thumb-url'}, ...])
  const allImages = Array.from({ length: 500 }, (_, i) => ({
    original: `https://picsum.photos/800/600?random=${i}`,
    thumbnail: `https://picsum.photos/100/100?random=${i}`
  }));

  const [currentImages, setCurrentImages] = useState([]);
  const [currentBatchIndex, setCurrentBatchIndex] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  const BATCH_SIZE = 100;

  // Load the first batch on component mount
  useEffect(() => {
    loadNextBatch();
  }, []);

  const loadNextBatch = () => {
    if (isLoading) return; // Prevent duplicate requests
    setIsLoading(true);

    const start = currentBatchIndex * BATCH_SIZE;
    const end = start + BATCH_SIZE;
    const newBatch = allImages.slice(start, end);

    if (newBatch.length > 0) {
      setCurrentImages(prev => [...prev, ...newBatch]);
      setCurrentBatchIndex(prev => prev + 1);
    }

    setIsLoading(false);
  };

  // Trigger load when user scrolls near the bottom of the gallery container
  const handleScroll = (e) => {
    const container = e.target;
    // Adjust the threshold (200px) based on your layout needs
    if (container.scrollTop + container.clientHeight >= container.scrollHeight - 200) {
      loadNextBatch();
    }
  };

  return (
    <div style={{ height: '85vh', overflowY: 'auto', padding: '1rem' }} onScroll={handleScroll}>
      <ImageGallery items={currentImages} />
      
      {/* Optional: Manual load button for users who prefer it */}
      {currentBatchIndex * BATCH_SIZE < allImages.length && (
        <button 
          onClick={loadNextBatch}
          disabled={isLoading}
          style={{ 
            marginTop: '1.5rem', 
            padding: '0.75rem 1.5rem', 
            width: '100%',
            fontSize: '1rem',
            cursor: isLoading ? 'not-allowed' : 'pointer'
          }}
        >
          {isLoading ? 'Loading more...' : 'Load 100 more images'}
        </button>
      )}
    </div>
  );
};

export default BatchLoadedGallery;

Key Notes: #

• We use allImages to store your full dataset, and currentImages to track the subset currently rendered.
• The loadNextBatch function slices the next 100 images from allImages and appends them to currentImages.
• We add a scroll listener to the gallery container to auto-load more images when the user is near the bottom. The "Load More" button acts as a reliable fallback.
• The isLoading state prevents multiple simultaneous load requests when scrolling quickly.

Great news: react-image-gallery has built-in lazy loading support, so you don’t need extra libraries for this! Just enable the lazyLoad prop, and the component will automatically defer loading image resources until they’re near the viewport.

Enable Lazy Loading in Your Gallery: #

Modify the ImageGallery component like this:

<ImageGallery
  items={currentImages}
  lazyLoad={true} // Enable built-in lazy loading
  // Optional: Customize the loading placeholder
  lazyLoadComponent={
    <div style={{
      width: '100%',
      height: '400px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#f5f5f5'
    }}>
      <p>Loading image...</p>
    </div>
  }
/>

How It Works: #

• When lazyLoad is true, the component uses an intersection observer to detect when images enter (or are about to enter) the viewport, then loads their original and thumbnail sources.
• The lazyLoadComponent lets you replace the default loading placeholder with something that matches your app’s design.

Combining Both Features #

By using batch loading + lazy loading together, you get the best of both worlds:

1. You only fetch and render 100 image objects at a time (keeping your DOM lightweight).
2. Those 100 images are only loaded as needed (saving bandwidth and improving initial load time).

内容的提问来源于stack exchange，提问作者Yash Patel