feat: lazy-load images

[bernardo-martinez]

Hello guys! first of all: really nice library thanks a lot for it!
My question is: is there an option to lazy-load the images? As images are big, if i have multiple drifts on my page i'd like to only load the images that the user actually wants to zoom in to improve performance...

Thanks!

[frederickfogerty]

Hey there @bernardo-martinez 👋 thanks for the question and sorry for the delayed reply. Unfortunately there is no out-of-the-box method to do lazy loading at this stage in this library.

At this stage I could only think of using a user-side scroll listener to only initialise Drift once the user has scrolled to that image, or hovers over it for example.

Let me know if you think of any other ideas! In the meantime I'll put this on our roadmap to handle at some point.

[bernardo-martinez]

Thanks Frederick, I will try to think on the best approach and discuss it here with you, maybe i will arrange some time to work on a solution

My problem would not be solved by the scrolling listener cause the Drifts are loaded on a pop-up element only when client clicks on 'quick preview' on each product. So I have a homepage with multiple 'most viewed' products that are loading the big images on every page rendering (well the browser is caching for later requests, but i care about the first one as there can be no 2nd one XD) but are only viewed when the user clicks on aforementioned quick preview element

thanks for the reply

[luqven]

Hey @bernardo-martinez ,

I wanted to check in on this quickly.

We still don't have room in the roadmap to tackle it just yet. Once we've had a chance to work through our backlog, we'll return to this ticket and re-evaluate tackling this.

Until then I'm leaving this ticket open to gauge community interest in this feature. If anyone else would like to see this added, please feel free to leave a comment or reaction on this post. That will help us measure community interest in adding this capability.

Thanks again for reposting this issue!