Add loading="lazy" to images

[smite107]

Is your feature request related to a problem? Please describe.

Hi! Very like your work.
We wanted to make images lazy. Its easy - just add 'loading="lazy"' to img tag.
But its not easy to make it via current API.
First of all I tried to use Custom render function. And yes - I added this property to my img, but all other calculated properties just missed. So there is no any listener that will add needed classes and custom styles like max-width / max-height, etc.

Describe the solution you'd like

So I see few variants how to solve this:

1. Give 'render' function another parameter like 'props' / 'ref' / or anything that will allow lightbox add computed slide attributes to custom slides.
2. Any slide property except 'type' will be added into object..
3. Support loading=lazy parameter for slides by default

Describe alternatives you've considered

No response

Additional context

loading="lazy" for images is great way to optimize images loading

[igordanchenko]

Hi there!

Can you elaborate on the performance optimizations you expect to achieve with loading="lazy"?

This library uses "eager" image loading for the following reasons:

• the current image is already in the viewport when the lightbox opens and must be loaded ASAP; there is no reason to use "lazy" here.
• the lightbox doesn't use "lazy" for offscreen images in order to preload them while they are still offscreen; this is a UX improvement as you don't have to stare at a loading spinner after you switch to the next slide.
• the lightbox preloads only a limited number of slides (5 by default)

[smite107]

We use high quality images in lightbox and loading of 5 items at start can be not good for our users with low network connection.
As user of your library I want to have a chance to add this attribute to image somehow. Ofcourse not for first image, but for another images. I think this is more about customization. Maybe I want some data-attributes here... for example.

[igordanchenko]

You can add loading="lazy" image attribute through the carousel.imageProps:

carousel={{ imageProps: { loading: "lazy" } }}

[smite107]

Not ideal but works.
Also we have one more problem. Part of our images are protected by Authentication headers. So we made special Picture component that load private image on its mount, convert to base64 and insert it into img tag. And the easiest way to use it with your library is custom slide render. But again, we have not possibility to add your computed slide properties to our images. Maybe you can suggest some way to implement it.

[igordanchenko]

Also we have one more problem. Part of our images are protected by Authentication headers. So we made special Picture component that load private image on its mount, convert to base64 and insert it into img tag.

Base64 is not the best option performance-wise. I'd use URL.createObjectURL instead.

And the easiest way to use it with your library is custom slide render. But again, we have not possibility to add your computed slide properties to our images. Maybe you can suggest some way to implement it.

You can access lightbox props with the useLightboxProps hook and pass imageProps to your <img> tag. But then you probably don't need loading="lazy" at all since you can control when to fetch your images. You can also re-use the internal ImageSlide component if you want.

https://stackblitz.com/edit/yet-another-react-lightbox-257?file=src%2FApp.tsx