twobin/react-lazyload

Can I pause`checkVisible` while the container is in `display: none` ?

Opened this issue · 0 comments

→ here is a demo in Codesandbox
open the console and observe,
you'll find that the testA window (the red one) with display: block is lazy-load normally √
but the testB window (the yellow one) will load all children immediately ×

and then I check the source code, found that checkOverflowVisible will always return true while the scrollContainer is display: none

const checkOverflowVisible = function checkOverflowVisible(component, parent) {
  const node = ReactDom.findDOMNode(component);
  
  let parentTop;
  let parentLeft;
  let parentHeight;
  let parentWidth;

  /**
  * these varible will always equal `0` while the `scrollContainer` is `display: none`
  */
  try {
    ({ top: parentTop, left: parentLeft, height: parentHeight, width: parentWidth } = parent.getBoundingClientRect());
  } catch (e) {
    ({ top: parentTop, left: parentLeft, height: parentHeight, width: parentWidth } = defaultBoundingClientRect);
  }
  ...

  return (offsetTop - offsets[0] <= intersectionHeight) &&
    (offsetTop + height + offsets[1] >= 0) &&
    (offsetLeft - offsets[0] <= intersectionWidth) &&
    (offsetLeft + width + offsets[1] >= 0);
};

So, is that possible to insert code likes:

if (!parentHeight && !parentWidth) return;

into checkOverflowVisible?

or are there already has some methods to pause check while scrollContainer is not visible?

thanks.