search

francoischalifour / medium-zoom

🔎🖼 A JavaScript library for zooming images like Medium
https://medium-zoom.francoischalifour.com
MIT License
3.58k stars 160 forks source link

Images get loaded/reloaded too often #175

Closed DEvil0000 closed 3 years ago

DEvil0000 commented 3 years ago

Bug description

Not every time but often opening the zoom view the zoomed image gets loaded again. This bug is worse when data-zoom-src is used since the original then gets loaded again also. This bug may not be a big issue depending on the server and browser caching and may be otherwise browser dependent (chrome here).

How to reproduce

  1. open debugger -> network tab
  2. click on the image to open
  3. click on the image to close
  4. images got loaded again

Strangely however this may not happen if you repeat this with the same image. More strange is if you repeat it after a moment (viewing one or two other images in zoom and zoom the first one again) you will trigger a reload again.

Expected behavior

I expect it to keep the image/html in dom to prevent reloads. This however may not work well with all devices and on sites with big images. Maybe it is a good idea to have a config option for this per image - using a data attribute.

Environment

francoischalifour commented 3 years ago

Thanks for the report! Can you please reproduce the issue in this sandbox?

DEvil0000 commented 3 years ago

I can kind of reprodce this but even better I can explain it now. The following was observed for a img tag with data-zoom-src.

When clicking a image the img tag will get duplicated as two copies in the dom tree. This may cause loading of the image depending on the browsers caching. So in case you turn off cache or your browser decided not to cache a image (anymore) due to its size or your machines RAM situation it will cause new requests. Since the img tag copies get removed on close this may happen every time you click a image to zoom.

I am not sure if you want to address it since this issue is very dependend on browser cache handling. The only thing I can think of to mitigate is not to remove img tags from the dom but reuse them instead as much as possible.

francoischalifour commented 3 years ago

Thank you for investigating @DEvil0000!

As you mentioned, that's a bit out of scope because very dependent on your browser's settings–so I'll close this issue 🙂