When opening the LightBox, it loads every image.

[spaceguy101]

On such implementation

      <Lightbox
        currentImageIndex={currentImage}
        setCurrentIndex={setCurrentImage}
        isOpen={viewerIsOpen}
        onClose={() => closeLightbox()}
        images={photoGallery.photos}
      />

When viewerIsOpen is true, the modal opens and starts downloading every elements of images.

If there is a lot of elements, it slows down the browser a lot, especially on mobile.

Is there a way to download only the visible image or maybe lazy load only the few next images ?

[guillenjs]

I am experiencing a similar issue. It seems like if there are too many images the lightbox won't open until all the images are loading. Causing it to seem like the feature is not working to the end user.

I know that it works though because once images are loaded the lightbox works. Is there a solution for this?

[andreynovikov]

As a workaround I've added loading: 'lazy' to every image entry in array like that:

const images = [
  {
    src: 'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg',
    loading: 'lazy'
  },
  {
    src: 'https://timellenberger.com/static/blog-content/dark-mode/macos-dark-mode.png',
    loading: 'lazy'
  }
];

LightBox propagates all props to <img> element and thus enables native browser lazy loading. I've tested it in desktop Chrome: when LightBox is opened only one extra image is loaded by browser. Looks perfect for me. Have not tested it on mobile yet.