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

[Elnadrion]

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

• OS: Windows 10
• Browser: FF 80 / Chrome 85

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

[erichstark]

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]

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]

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]

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

[verlok]

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]

Alright, thank you 🤗👍🏻

[verlok]

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]

Thank you very much for the coffee, @Elnadrion

You rock! 👨‍🎤