Improve the perceived performance when using HD images

[francoischalifour]

Improve the perceived performance when using HD images

[francoischalifour]

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

[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)