visibility detection

This issue has been tracked since 2017-10-17.

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.

davydog187 wrote this answer on 2017-10-17

This isn’t about visibility at all, it’s about detecting the correct offset parent for scrolling.

jasonslyvia wrote this answer on 2017-10-17

@davydog187 CMIW, by using IntersectionObserver API, there is no need to do such detection at all.

davydog187 wrote this answer on 2017-10-17

The IntersectionObserver API still has spotty browser support FWIW http://caniuse.com/#feat=intersectionobserver

elrumordelaluz wrote this answer on 2017-10-18

leave this as documentation in case could be helpful. Should be awesome to use IntersectionObserver pollyfilled when needed.

jasonslyvia wrote this answer on 2017-10-18

The polyfill is ~7KB compressed, I'm not sure if it's a performance concern for some of us.

jooj123 wrote this answer on 2017-10-24

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

jasonslyvia wrote this answer on 2017-10-24

@jooj123 Thanks for your valuable information

jasonslyvia wrote this answer on 2017-11-03

It seems like IO is not working well on mobile platforms. https://www.quirksmode.org/blog/archives/2017/10/intersection_ob.html

jooj123 wrote this answer on 2017-11-04

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

max-mykhailenko wrote this answer on 2018-01-16

So, what recommendation you can give for lazy loading for horizontal overflows?

evolutionxbox wrote this answer on 2021-03-10

The IntersectionObserver API still has spotty browser support FWIW http://caniuse.com/#feat=intersectionobserver

Support is now at 93.88%

More Details About Repo
Owner Name twobin
Repo Name react-lazyload
Full Name twobin/react-lazyload
Language JavaScript
Created Date 2015-08-07
Updated Date 2022-11-29
Star Count 5639
Watcher Count 52
Fork Count 482
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date