react-lazyload
react-lazyload copied to clipboard
twobin
visibility detection
There has been a lot of issue discussing on this one, so I'd like to gather them altogether so we can have a better understanding what's wrong and what needs to be done.
For starters, #122 looks promising to completely resolving this issue.
This isn’t about visibility at all, it’s about detecting the correct offset parent for scrolling.
@davydog187 CMIW, by using IntersectionObserver API, there is no need to do such detection at all.
The IntersectionObserver API still has spotty browser support FWIW http://caniuse.com/#feat=intersectionobserver
leave this as documentation in case could be helpful. Should be awesome to use IntersectionObserver pollyfilled when needed.
The polyfill is ~7KB compressed, I'm not sure if it's a performance concern for some of us.
Just a quick note, I was using this library until I found:
https://github.com/thebuilder/react-intersection-observer
Which uses IntersectionObserver under the hood
Works quite nicely for my use case and far more performant for browsers that support it (especially low end devices)
You could swap out the visibility detection for sure
I didnt find the polyfill to be a big performance issue on browsers that dont support IntersectionObserver
note: it does require tinkering with rootMargin to get right on some browsers
It seems like IO is not working well on mobile platforms. https://www.quirksmode.org/blog/archives/2017/10/intersection_ob.html
The edge issue i worked around by adding some rootMargin as mentioned above
Not sure about the mobile issues he mentions, I never came across these
So, what recommendation you can give for lazy loading for horizontal overflows?
The IntersectionObserver API still has spotty browser support FWIW http://caniuse.com/#feat=intersectionobserver
Support is now at 93.88%
From what I can see, the use of IntersectionObserver may also solve some of the issues people have had using react-lazyload from within iframes. For example here: https://github.com/gemini-testing/html-reporter/pull/149
I bring this up since I know some teams that cannot use react-lazyload in an iframe, likely due to the viewport of iframes behaving differently from the main context.
