Add lazy-load support

[cwang22]

Hi, great work and loved it 👍

would you consider add lazy-load support?

e.g. provide an option to bind the event listener on the selector instead of the itself, so it works for lazy-loaded images?

Thanks.

[francoischalifour]

Hi there, I don't think this is the responsibility of this library.

If you use another library to lazy load your images, you can dynamically apply the zoom to the images once they're loaded.

Does that make sense?

[cwang22]

yeah, didn't think this way, thanks

[knynkwl]

I feel like some type of image loaded event would be nice.

If the image is large then it would be nice to set a loading class and only open the modal when the image has loaded. I am running into problem where the image is large and the modal shows with the thumbnail not expanded, then a second or two later the image will expand.

[francoischalifour]

To avoid the loading time, you can preload the large images when the thumbnails enter in the viewport. You can use the Intersection Observer API for this. I don't think this should be part of Medium Zoom because it becomes too opinionated. Besides, it is not very hard to implement on user-land.

I made an example on this sandbox. You can see that the large version of the images load when the thumbnails enter in the viewport.

Check the network requests on this GIF:

Let me know if that can solve your problem. Otherwise, we can work together to define a better API.

Note: I will work on a plugin system for Medium Zoom including a router, a preload system, and a slide system. These will be plugins for Medium Zoom, and not part of the core. There's no ETA yet.

[knynkwl]

This can work. A plugin system would be awesome though!