search

twobin / react-lazyload

Lazy load your component, image or anything matters the performance.
MIT License
5.85k stars 487 forks source link

visibility detection #129

Open jasonslyvia opened 6 years ago

jasonslyvia commented 6 years ago

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 commented 6 years ago

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

jasonslyvia commented 6 years ago

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

davydog187 commented 6 years ago

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

elrumordelaluz commented 6 years ago

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

jasonslyvia commented 6 years ago

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

jooj123 commented 6 years ago

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 commented 6 years ago

@jooj123 Thanks for your valuable information

jasonslyvia commented 6 years ago

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

jooj123 commented 6 years ago

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 commented 6 years ago

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

evolutionxbox commented 3 years ago

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

Support is now at 93.88%

roblkenn commented 11 months ago

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.