Open ArthurHwang opened 4 years ago
Did you have a look at ExampleDynamicLoading in the examples directory?
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} />
}
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 }) }}>
{photo.alt}
<img alt="Eye SVG" src='/api/temp/eye.svg' />
</div>
</div>
)
);`
`
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>
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.