Is your feature request related to a problem? Please describe.
Assume that you have a WooCommerce product that contains a very high number of variations (90 variations for instance, as in my case). Each of these variations will need to display a specific image, and therefore the gallery will contain the full number of images to correspond to each of these variations.
Describe the solution you'd like
An image is worth thousands of words. As you can see below, the gallery displays on the screen only 4 images.
the main image
the 3 following images of the gallery
Since the gallery itself is within the viewport on both desktop and mobile, the entire gallery (and all of its images) are loaded on pageload. In other words, all the 90 images are downloaded on page load.
This is obviously irrelevant and inefficient for speed and performance reasons.
Describe alternatives you've considered
We should download on pageload only the images from the gallery within the viewport that are effectively displayed. In this case, only 4 images should be downloaded instead of 90 images.
We should not download on pageload the images from the gallery within the viewport that are not yet displayed in the screen unless the user scrolls the gallery. Those images should be lazyloaded and downloaded only as the user scrolls them.
Is your feature request related to a problem? Please describe. Assume that you have a WooCommerce product that contains a very high number of variations (90 variations for instance, as in my case). Each of these variations will need to display a specific image, and therefore the gallery will contain the full number of images to correspond to each of these variations.
Describe the solution you'd like An image is worth thousands of words. As you can see below, the gallery displays on the screen only 4 images.
Since the gallery itself is within the viewport on both desktop and mobile, the entire gallery (and all of its images) are loaded on pageload. In other words, all the 90 images are downloaded on page load.
This is obviously irrelevant and inefficient for speed and performance reasons.
Describe alternatives you've considered We should download on pageload only the images from the gallery within the viewport that are effectively displayed. In this case, only 4 images should be downloaded instead of 90 images.
We should not download on pageload the images from the gallery within the viewport that are not yet displayed in the screen unless the user scrolls the gallery. Those images should be lazyloaded and downloaded only as the user scrolls them.
Additional context GTmetrix : https://gtmetrix.com/reports/www.gevcen.be/ki89QWe2/
Video capture : https://sgevcen.tinytake.com/tt/NTIxNjQzMl8xNjMxNjc5Mw