Improve the perceived performance when using HD images

[borisirota]

The problem

When using different images (default and HD via srcset or data-zoom-src), after the user clicks the image in order to zoom, the screen pretty much freezes and he has to wait until the HD image was downloaded for the scaling animation to begin.

Solution

Use the regular flow when the user clicks on image in order to zoom and switch between the default and HD images only after the animation ended and the default image in its scaled position. This way the user won't feel the freezing effect + it will give the HD image enough time to download while the animation is active (300ms).

Implementation

When the user clicks on the image, the regular animation begins + start downloading the HD image. Then, replace the default image with the HD image once the scaling animation ended or the HD image has been downloaded (the latter between those 2 events).

Even if there will be situations where the HD image will take more than 300ms to download and the user will see "blurry" image (the scaled default image) meanwhile, It seems to me better than the current flow where everything just freezes while the HD image is being downloaded :)

Thanks for a great package :)

[francoischalifour]

Thanks for opening this issue.

The challenge with scaling a low-quality image before having the HD image loaded is that there's no way to know where the image should be positioned. This is because we don't know in advance the size of the HD image. The only information that we can guess is the ratio, which still might change from the low-quality image.

There are already strategies put in place to start the animation as soon as we can detect the HD image size, without it being fully loaded yet. To my knowledge, this is the best solution without making false assumptions.

The possible alternative that I usually recommend is to preload the HD images when the low-quality image enters in the viewport. You can check my implementation shared earlier.

If I'm proved to be wrong, feel free to send a PR!

Let me know if that works for you.

[borisirota]

I see. I haven't thought about the lack of info. My HD images are always the same ratio as the default ones and fill the whole available area so I don't face the issues you mentioned.

I'm using the preload alternative currently, which is not the optimal solution but it does the job.

Thanks u for the quick reply :)

[Reedo0910]

@francoischalifour Hi, what if I've already received the natural width & height of the HD image from my server, is there a way to prevent the zoom-in animation from "freezing"? I'd like to load the HD image after the zoom-in animation finishes, instead of doing nothing but watching the whole screen freezes. (In my case, preloading the HD image doesn't fit, because its size is too large. I don't want to waste my bandwidth if my client has not clicked on the source image)

[francoischalifour]

We could support two attributes data-zoom-width and data-zoom-height that indicates Medium Zoom which dimensions should the zoomed image take.