Image is not zooming while continuous clicking

[karthickramasamy08]

Added the zooming files on my blog pages. It is working for normal cases, but i am trying to click the image multiple time continuously 1. sometimes it is not respond(can't zooming) 2. some times alignment is collapsed(image alignment). It is mainly affected on the large monitors(4k monitors). Can you please check and help me to resolve this problem.

[spinningarrow]

Can you elaborate on the problem a little? Does it happen on all browsers? Could you send me a video showing the issue?

[jetibest]

Yes, it happens potentially on any browser, no need for a video (but found the issue in Chrome for Android). You can easily reproduce it by reducing your internet speed and disable cache in responsive dev mode of browser. And click again on the image to zoom, while the overlay has not been shown yet, because the image for the overlay is still loading.

The problem is that when the zoom(event) is called, it creates the activeZoom object together with the event-listeners to remove the activeZoom object again. However, the overlay is added when the img.onload is called.

So if you already destroyed activeZoom while img.onload has not called yet, then the overlay will show up, but without an activeZoom object. This results in the major bug the overlay cannot be removed.

There are several solutions to this problem possible:

• You may add if(!document.querySelector('.zoom-overlay')) return; to the closeActiveZoom(options) function. So that the activeZoom cannot be destroyed when the overlay is not there yet.

• Another solution would involve aborting the img.onload handler. Make the img globally available in vanillaZoom, and then set if(img) img.onload = null in the close() and dispose() functions. I chose this one, as it is the easiest to implement, and most robust.

• Another solution is to already add the overlay immediately, and also showing a loading-icon. Of course this only applies if the image is not cached, and therefore cannot be shown immediately (for instance, any image that has been dynamically generated by the server and is not supposed to be cached) - otherwise the few milliseconds the loading-icon is shown is not worth the trouble.

EDIT: I noticed your img instance is only used to get the original width/height. But you can just set the fullWidth and fullHeight to targetImage.naturalWidth and targetImage.naturalHeight and avoid creating a new HTMLImage element in the first place.

[spinningarrow]

@jetibest thank you for the reproduction steps! I see the issue now as well. I think option 1 sounds quite straightforward - are there any downsides to that?

Also thanks for the suggestion about fullWidth/naturalWidth. I'll look into it. So far I've avoided making changes to the core of the library that I forked from, but it might be time to revisit that!

[jetibest]

Of course, using naturalWidth and naturalHeight is more elegant.

I cannot think of any special downsides to the first option. The only thing to consider is that .zoom-overlay is a pretty generic class name, and there might be collisions. But that potential problem is not unique to this specific issue.

[kirillgroshkov]

I just noticed this issue in my environment as well (more often in dev mode, using nuxt.js).

Would be nice to have fixed soon.