twobin / react-lazyload

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

"overflow" and "resize" won't work together #338

Open g1091541365 opened 3 years ago

g1091541365 commented 3 years ago

It seems that this part of the code has caused this bug. When the prop "overflow" is set, the code doesn't add resize listener.

if (this.props.overflow) {
  const parent = scrollParent(this.ref);
  if (parent && typeof parent.getAttribute === 'function') {
    const listenerCount = 1 + +parent.getAttribute(LISTEN_FLAG);
    if (listenerCount === 1) {
      parent.addEventListener('scroll', finalLazyLoadHandler, passiveEvent);
    }
    parent.setAttribute(LISTEN_FLAG, listenerCount);
  }
} else if (listeners.length === 0 || needResetFinalLazyLoadHandler) {
  const { scroll, resize } = this.props;

  if (scroll) {
    on(scrollport, 'scroll', finalLazyLoadHandler, passiveEvent);
  }

  if (resize) {
    on(window, 'resize', finalLazyLoadHandler, passiveEvent);
  }
}
TanyaTPG commented 2 years ago

Is this solved by now?

TanyaTPG commented 2 years ago

I am having the same issue, when I have specified overflow prop, and window resize event doesn't load unless I scroll the container div's scroller. Please provide details on solution to this problem..

g1091541365 commented 2 years ago

I've solved this problem by using the utility forceCheck. Every time the window resizes, I call it manualy. It seems wirely, but it helps indeed.