Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

data-zoom-src not working with loading attribute

See original GitHub issue

Bug description

When zooming into an image that has a data-zoom-src and a loading="lazy" attribute, the webpage becomes unresponsive and stuck.

How to reproduce

This is easily reproducible if you have caching turned off (open dev tools and enable the “disable cache” option). It should also happen all the time if the browser has not cached/downloaded the data-zoom-src image before

Click on a image that contains a data-zoom-src and a loading="lazy" attribute with a data-zoom-src image that has not been cached yet

Here is a gif of what happens in action (the webpage becomes stuck and needs to be refreshed):

jiff

Reproducible example

Link to the bug reproduction

Environment

Browser: chrome / version: 99.0.4844.51
Browser: firefox / version: 98.0.1 (64-bit)
medium-zoom version: 1.0.6

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

NYPDcommented, Jul 15, 2022

It’s up to @francoischalifour to create an official release, I’m just a random dude who submitted a pull request. I guess you could fork this repo and submit your own package in npm with the fix included.

0reactions

francoischalifourcommented, Nov 14, 2022

🎉 This fix was released in v1.0.7.

Sorry that it took this long to release. I got local dependency issues on my new laptop which put off the release. I should invest in triggering the release from the CI.

Top Results From Across the Web

Why doesn't adding loading="lazy" with JavaScript work to ...

I'm able to add the loading="lazy" attribute on individual images, or with JavaScript and apply them all at once.

Lazy loading via attribute for images & iframes - CanIUse

The loading attribute on images & iframes gives authors control over when the browser should start loading the resource. Usage % of.

Browser-level image lazy loading for the web - web.dev

How does the loading attribute work with images that are in the viewport but not immediately visible (for example: behind a carousel, or...

Lazy loading - Web performance | MDN

Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the ......

WebP Picture conflict with Lazy Loading - WordPress.org

We use WP filter wp_get_attachment_image_attributes to add lazy loading attributes to our images and it is working fine. We remove srcset and sizes...