Is there a way to lazy load images?

[ArthurHwang]

Thank you for the awesome library, it has served me well.

However my gallery has ballooned to 30+ images. Is there a way to lazy load images? Or point me in the right direction?

I'm kind of clueless how I would implement it with this package.

[PeterUlb]

Did you have a look at ExampleDynamicLoading in the examples directory?

[ako-v]

I think the best approach is using "loading" attribute. Like this:

import Gallery from "react-photo-gallery";
import { photos } from "../../resources/photos";

export default function PhotoGallery() {
  useEffect(() => {
    photos.map(photo => {
      photo.loading = "lazy";
      return photo;
    });
  }, []);

  return <Gallery photos={photos} />
}

[mattg66]

I have used the react-lazy-load-image-component as followed: const imageRenderer = useCallback( ({ index, left, top, key, photo }) => ( <div className="image-overlay-container" style={{margin: '2px'}}> <LazyLoadImage alt={photo.alt} effect="blur" className="image-hover" width={photo.width} height={photo.height} placeholderSrc={photo.srcSet.lazyLoadPlaceholder} src={photo.srcSet.thumbnail} style={{ top: top, left: left}} /> <div className="overlay text-center" onClick={(e) => { openLightbox(e, { photo, index }) }}> <p>{photo.alt}</p> <img alt="Eye SVG" src='/api/temp/eye.svg' /> </div> </div> ) );

<Gallery2 photos={selectedWork} renderImage={imageRenderer}/> <ModalGateway> {viewerIsOpen ? ( <Modal onClose={closeLightbox}> <Carousel currentIndex={currentImage} views={selectedWork.map(x => ({ ...x, srcset: x.srcSet, caption: x.alt }))} /> </Modal> ) : null} </ModalGateway>

I don't know why my formatting is broken

[ReallyLiri]

formatted, for future generations ;)

const imageRenderer = useCallback(({index, left, top, key, photo}) => (
        <div className="image-overlay-container" style={{margin: '2px'}}>
            <LazyLoadImage
                alt={photo.alt} effect="blur" className="image-hover" width={photo.width} height={photo.height} placeholderSrc={photo.srcSet.lazyLoadPlaceholder}
                src={photo.srcSet.thumbnail} style={{top: top, left: left}}
            />
            <div className="overlay text-center" onClick={(e) => {
                openLightbox(e, {photo, index})
            }}>
                <p>{photo.alt}</p>
                <img alt="Eye SVG" src='/api/temp/eye.svg'/>
            </div>
        </div>
    )
);

<Gallery2 photos={selectedWork} renderImage={imageRenderer}/>
<ModalGateway> {
    viewerIsOpen
        ? (<Modal onClose={closeLightbox}>
            <Carousel currentIndex={currentImage} views={selectedWork.map(x => ({...x, srcset: x.srcSet, caption: x.alt}))}/>
        </Modal>)
        : null
}
</ModalGateway>