Lazyloading images from product gallery

Dear,

I found this thread from another user :
https://xtemos.com/forums/topic/lazy-load-product-images/

You advised him to disable the “zoom” for not loading the images in full size, but I’d like to go further than that.

If you check the below gtmetrix analysis, you’ll see that my product is loading about 90 images all at once from the beginning altough it’s obvious the user won’t check the 90 images directly => too much to load & causing high loading time.

User will scroll step by step in the gallery, and so it should lazyload them. How can I lazyload the images from the gallery if they are not yet visible on the screen?

Thanks