search

verlok / vanilla-lazyload

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
https://www.andreaverlicchi.eu/vanilla-lazyload/
MIT License
7.67k stars 675 forks source link

Getting lost of src attribute when having a double instance of LazyLoad #484

Closed Elnadrion closed 3 years ago

Elnadrion commented 4 years ago

Describe the bug I'm using CSS hover effect to change the picture in slider (1st become "display: none" and second become "display: block") When 1st picture became "display: none" it's attribute src getting lost, and then, when I move cursor out of the picture - there is no picture at all It works only in 17+ versions

To Reproduce Steps to reproduce the behavior:

  1. Go to https://babybug.ru/katalog/detskaya_odezhda/longslivy/longsliv_jacqueline/?clear_cache=Y&vanila-lazy-load=17 (I made GET attribute "vanila-lazy-load=17" to include 17 version of plugin. For mortals I'm including 15 version wich works fine
  2. !!! Update page again (to reset composit cache (feature of 1C-Bitrix CMS))
  3. Scroll down to block "ПОПУЛЯРНЫЕ ТОВАРЫ"
  4. Hover cursor on pictures below the title and you'll see the bug

LazyLoad version 17+

Desktop (please complete the following information):

Additional context Also I made the video for you https://yadi.sk/i/NNmmK2DR1fALLQ

erichstark commented 3 years ago

Hey @Elnadrion, I can confirm this bug. I have similar problem. When I scroll page multiple times, it looks like that image is still observed and src attribute is removed on second time.

Until this will be fixed, you can use temporary solution. Instead of elements_selector you can pass elementsToLazyLoad even if you want to select only one element

const elementsToLazyLoad: NodeListOf<HTMLElement> = document.querySelectorAll('.lazy');
new LazyLoad(
      {
        // elements_selector: '.lazy',
        use_native: false,
      },
      elementsToLazyLoad
);

Please let me know, if that helps.

verlok commented 3 years ago

Hey @Elnadrion , thanks for reporting and sorry that I'm replying this late!

I've created this pen to try and reproduce the problem, but I couldn't. Could you please fork it and reproduce the problem in the new pen?

Thanks

Elnadrion commented 3 years ago

Hi @verlok While I was making my pen I think I figured out what's wrong In my project I accidentally called "new LazyLoad()" twice. In 15.2 version there wasn't any bugs. But in 17+ pictures started to disappear because of that (only in case with the hover effect)

verlok commented 3 years ago

Thank you @Elnadrion for reporting that, I will investigate on why that happens, then try and solve it.

verlok commented 3 years ago

I've found that the conflict between the 2 instances of LazyLoad occurs only in version 17 because of the newly added feature cancel_on_exit. I will work on how to avoid the second+ instance watching the same elements of the first instance.

Elnadrion commented 3 years ago

Alright, thank you 🤗👍🏻

verlok commented 3 years ago

Hey @Elnadrion,

I've just pushed version 17.2.0, which solves this problem, and it's also 0.5kb lighter. The problem was introduces in 16.1.0 with an optimization which didn't consider this corner case. I've rolled it back.

If you’re happy with my support, the documentation and the effort I’ve been putting on this project in the latest years, I hope you might want to buy me a coffee to show your appreciation.

Open-source software is great for everyone, but it takes passion and time to grow and evolve.

Thank you for thinking about it. Have a nice day!

verlok commented 3 years ago

Thank you very much for the coffee, @Elnadrion

You rock! 👨‍🎤