search

twobin / react-lazyload

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

Items do not render when they are scrolled into view #175

Open Nantris opened 6 years ago

Nantris commented 6 years ago

I've tried all sorts of combinations of options. Any thoughts in where to begin with debugging this?

Thanks!

samakshjain commented 6 years ago

+1

maikelmclauflin commented 6 years ago

@Slapbox @samakshjain usually this is a problem when the document is not the where the scroll event is being triggered. i have submitted a pull request to add custom scroll containers. just waiting on @jasonslyvia to merge so you can define your own

Nantris commented 6 years ago

@mmclau14 thanks for your thoughts on this issue. Can you explain a little what you mean by:

when the document is not where the scroll event is being triggered

Thanks again!

samakshjain commented 6 years ago

@mmclau14 So a component nested more than 1 level deep would not trigger lazy loading?

maikelmclauflin commented 6 years ago

@Slapbox depending on your page structure, the scroll event might not be triggered on the document element. scroll events do not propagate up. It just depends on your structure. @samakshjain is probably right.

WajeehZantout commented 6 years ago

I was facing the same issue. I ended up using https://github.com/loktar00/react-lazy-load.

ahmadsaeed90 commented 5 years ago

I am facing same issue. Seems like their code only works on body level scroll. If any of the parent container has overflow: auto, it does not seems to trigger event.

ahmadsaeed90 commented 5 years ago

FYI, I was able to get it to work by setting scroll attribute because the parent div already had overflow on it.

Nantris commented 5 years ago

I just spent another hour trying to get this working. This is a great library if you have a simple layout, but otherwise it's probably not going to work has been my experience.

opula commented 5 years ago

I had this issue as well. I ended up forking the library because it really is great. My problem ended up being the passive config on the event handler. I overwrote this to be capture: true, passive: false.

Maybe that should be an option?

Nantris commented 5 years ago

@opula great find. I'm interested to know if others have success with that. I don't have time to give it a test right now unfortunately. @twobin what do you think?

Nantris commented 4 years ago

@twobin, any thoughts on a remedy for this? I'd really love to use this library, but the behavior today is the same for me as it was 18 months ago with react-lazyload@2.3.0.

Nantris commented 4 years ago

forceCheck() gets the components to display, but without it, nothing gets them to display - I only get placeholders. Scrolling, resizing, changing zoom, setting different scrollContainers and trying different overflow styles - nothing works. Any ideas at all welcome.

Nantris commented 4 years ago

Looking at @opula's branch, I see that @twobin's master branch seems to be missing code for handling non-string scrollContainers - am I mistaken?

https://github.com/twobin/react-lazyload/blob/master/src/index.jsx#L198-L202

Nantris commented 4 years ago

Please consider merging PR #276 which is a patch for this issue (based on @opula's work)