Separate preload for main images & thumbnails

[Aleafan]

Hello! I have a use case on our project where the main images are quite heavy. And I added separate thumbnail prop to load and see thumbs faster.

So for this case it would be great to separate amount of images preloaded for main view and thumbnails. E.g. I have 5 images, I preload only current image and all 5 thumbnails. And when I want to see another image fullsize I pick it and it loads on-demand.

Another point for such separation - I currently use dynamic preload number calculation so that thumbnails always fill all available space. When there is a lot of space my preload can be ~12 and then 12 images and 12 thumbs are loading at the same time when I only need 12 thumbs and 1-3 main images.

Is there any current mechanic to do this? Is it a good idea to add this feature to later releases?

Thanks a lot for the great job on this library!

[igordanchenko]

Hi there! Thank you for reaching out and describing your use case. In the past, I attempted to implement a separate preload prop for thumbnails, but I wasn't entirely happy with the UX, so I have postponed that idea for now. The main issue I ran into was the animation effect. Today, when you click a thumbnail, the main carousel and the thumbnails track are animated with a sliding effect. So what happens when the thumbnails preload prop is greater than the main preload prop is that there is a period of a blank black screen while the carousel is sliding through non-preloaded slides. Do you see this as an issue in your case? I also considered a workaround of adding a separate animation duration setting when a slide change is triggered from a thumbnail so that users could set it to 0 to mitigate this visual inconsistency (in this case, the lightbox would immediately switch to the new slide). Does this sound like a reasonable middle ground in your case?

In the meantime, you can implement a custom lazy-loading image slide wrapper that will allow you to avoid excessive image preloading (though it still exhibits the same visual inconsistency while sliding through non-preloaded images)

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

Please let me know your thoughts.

[Aleafan]

Thanks a lot for your help! I did the solution with a custom lazy-loading image slide wrapper.

I fixed a blank black screen while the carousel is sliding through non-preloaded slides by showing a loading spinner on all non-preloaded slides.

I think a separate animation duration setting when a slide change is triggered from a thumbnail is still a good idea cause it feels too slow sometimes.

I have another linked task. I need to make main images load in steps - first is the one on the screen, after - 2 images near (left and right), then - 2 images further away on both sides. Images can be heavy in size.
I played with idea of using fetchpriority attribute. But I see that already the image visible on the screen already has High priority (for some reason). Giving fetchpriority to other images will delay loading of the visible one.
I thought about setting some new state in Slide onLoad and triggering loading of next images that way. But onLoad triggers only after loading image first time, not on switching between slides, so state updates will be inaccurate.
There is also "complete" attribute on images which you do not expose so it needs to be access via dom methods. And its possible to make loading in steps after fixed timeouts which is not ideal.

So I'm a bit lost here. Could you suggest some hint how to implement such logic with your library? Or maybe the idea to load images in steps is altogether wrong and there is some better mechanism?

Thanks a lot!

[igordanchenko]

But I see that already the image visible on the screen already has High priority (for some reason).

That's the default browser behavior. All images get Low priority by default, but in-view images immediately get an upgrade to High.

Giving fetchpriority to other images will delay loading of the visible one.

Yeah, that's quite possible.

I thought about setting some new state in Slide onLoad and triggering loading of next images that way. But onLoad triggers only after loading image first time, not on switching between slides, so state updates will be inaccurate.

I'd keep this state in the Slide object itself. I just realized that with this approach, you won't even need a custom image component like the one I previously suggested.

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

Please let me know if this addresses your use case.

[Aleafan]

Your solution did address my use case.
I had to make a few changes as I get slides from the server and not in local state. So I added separate state for accounting loaded images.

And I had to deal with possible loading error. In this case onLoad is not triggered so I had to mark image as "loaded" in onError. And because you don't expose onError to ImageSlide I had to rewrite it and also show ErrorIcon by myself. Maybe it'd be useful for some cases like mine to have onError added to ImageSlide's props.

Anyway, I got my target.
Thanks a lot for your help!

[igordanchenko]

I'm sorry you had to go through all this trouble. I didn't realize from your previous comment that you needed an onError callback. It's now available in 3.20.1.

[Aleafan]

Perfect! Really appreciate it 👍