stratiformltd / react-loadable-visibility

A wrapper around react-loadable and @loadable/component to load elements once they are visible on the page.
BSD 3-Clause "New" or "Revised" License
1.01k stars 31 forks source link

Use the 'isIntersecting' attribute as a fallback for zero threshold #18

Closed Zubrolet closed 5 years ago

Zubrolet commented 5 years ago

There is a bug in determining an intersection when the threshold option is missing or equal to 0(which is the default value according to specs).

Actual result:

  1. Since in Chrome(Version 70.0.3538.110 and previous builds as well) intersection event for a target element fires only once with an intersectionRatio equal to 0 - wrapped component never get loaded;
  2. As a solution to this problem, I would suggest using isIntersecting attribute which is true if the target intersects with the root. I have already tested that code and it gives the result for an entry: isIntersecting === true && intersectionRatio === 0;

Expected result:

  1. Elements with missing or zero thresholds should be loaded correctly - it could be useful for lazy loading images;
  2. The fix should be quite simple though -
    if (trackedElement &&
    (entry.isIntersecting || entry.intersectionRatio > 0)
    ) {
    trackedElement.visibilityHandler()
    }
tazsingh commented 5 years ago

This has since been fixed by #19. Thanks for the PR!