Lazy loading not working?

[boehsermoe]

What steps will reproduce the problem?

LazyLoad does not working correctly since 1.6 with IntersectionObserver. All images will be loaded at first visit.

What is the expected result?

Load only visible images

What do you get instead? (A Screenshot can help us a lot!)

All images are loaded.

Additional infos

Q	A
LUYA Version	1.7
Operating system	macOS
Browser	Chrome, Firefox and Safari

[nadar]

@TheMaaarc did the lazy loading overhaul. Do you have more informations @boehsermoe which might help him?

[boehsermoe]

Not really... I start to debug it a bit and at page load the function imageIntersects will be called and each entry check with isIntersecting is true and load the image.

https://github.com/luyadev/luya/blob/86ba4683456e735d0c92b995ba5da7b6d9c6d417/core/resources/lazyload/lazyload.src.js#L99

Maybe this can help:

I found a example here where it works fine -> https://jsfiddle.net/umojfbLq/

But if I change the root node to the body node (like https://github.com/luyadev/luya/blob/86ba4683456e735d0c92b995ba5da7b6d9c6d417/core/resources/lazyload/lazyload.src.js#L33)

It does work correctly -> https://jsfiddle.net/umojfbLq/2/

[nadar]

Thanks for taking time for the investigations. I would say that's perfectly more info and i am sure @TheMaaarc will find a solution.

[TheMaaarc]

The main issue seems to have been the observerOptions.root option – unset/null is the best option to use for the whole document. document & body as option had some strange behaviour.

I also added a check for the isVisible property of the newer IntersectionObserver implementation. That option tracks stuff like opacity and visibility in general but is very restrictive (opacity 0.99% results in a not visible).

[boehsermoe]

Thank you!

[nadar]

i'll trigger a release today