Use IntersectionObserver when it's available

Author: Aljullu

.eslintrc

@@ -133,7 +133,7 @@
     "padded-blocks": [1, "never"],
     "quote-props": [1, "as-needed"],
     "quotes": [1, 'single'],
-    "require-jsdoc": 1,
+    "require-jsdoc": 0,
     "semi-spacing": 1,
     "semi": 1,
     "sort-keys": 0,

src/components/LazyLoadComponent.jsx

@@ -3,6 +3,7 @@ import { PropTypes } from 'prop-types';
 
 import PlaceholderWithoutTracking from './PlaceholderWithoutTracking.jsx';
 import PlaceholderWithTracking from './PlaceholderWithTracking.jsx';
+import isIntersectionObserverAvailable from '../utils/intersection-observer';
 
 class LazyLoadComponent extends React.Component {
   constructor(props) {
@@ -47,7 +48,7 @@ class LazyLoadComponent extends React.Component {
     const { className, height, placeholder, scrollPosition, style,
       threshold, width } = this.props;
 
-    if (this.isScrollTracked) {
+    if (this.isScrollTracked || isIntersectionObserverAvailable()) {
       return (
         <PlaceholderWithoutTracking
           className={className}

src/components/PlaceholderWithoutTracking.jsx

@@ -1,18 +1,58 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { PropTypes } from 'prop-types';
+import isIntersectionObserverAvailable from '../utils/intersection-observer';
 
 class PlaceholderWithoutTracking extends React.Component {
   constructor(props) {
     super(props);
+
+    if (!window.LAZY_LOAD_OBSERVER) {
+      const supportsObserver = isIntersectionObserverAvailable();
+
+      window.LAZY_LOAD_OBSERVER = { supportsObserver };
+
+      if (supportsObserver) {
+        const { threshold } = props;
+
+        window.LAZY_LOAD_OBSERVER.observer = new IntersectionObserver(
+          this.checkIntersections, { rootMargin: threshold + 'px' });
+      }
+    }
+  }
+
+  checkIntersections(entries) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.onVisible();
+      }
+    });
   }
 
   componentDidMount() {
-    this.updateVisibility();
+    if (this.placeholder &&
+        window.LAZY_LOAD_OBSERVER && window.LAZY_LOAD_OBSERVER.observer) {
+      this.placeholder.onVisible = this.props.onVisible;
+      window.LAZY_LOAD_OBSERVER.observer.observe(this.placeholder);
+    }
+
+    if (window.LAZY_LOAD_OBSERVER &&
+        !window.LAZY_LOAD_OBSERVER.supportsObserver) {
+      this.updateVisibility();
+    }
+  }
+
+  componentWillUnMount() {
+    if (window.LAZY_LOAD_OBSERVER) {
+      window.LAZY_LOAD_OBSERVER.observer.unobserve(this.placeholder);
+    }
   }
 
   componentDidUpdate() {
-    this.updateVisibility();
+    if (window.LAZY_LOAD_OBSERVER &&
+        !window.LAZY_LOAD_OBSERVER.supportsObserver) {
+      this.updateVisibility();
+    }
   }
 
   getPlaceholderBoundingBox(scrollPosition = this.props.scrollPosition) {

src/hoc/trackWindowScroll.js

@@ -2,12 +2,17 @@ import React from 'react';
 import { PropTypes } from 'prop-types';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
+import isIntersectionObserverAvailable from '../utils/intersection-observer';
 
 const trackWindowScroll = (BaseComponent) => {
   class ScrollAwareComponent extends React.Component {
     constructor(props) {
       super(props);
 
+      if (isIntersectionObserverAvailable()) {
+        return;
+      }
+
       const onChangeScroll = this.onChangeScroll.bind(this);
 
       if (props.delayMethod === 'debounce') {
@@ -31,22 +36,25 @@ const trackWindowScroll = (BaseComponent) => {
     }
 
     componentDidMount() {
-      if (typeof window == 'undefined') {
+      if (typeof window == 'undefined' || isIntersectionObserverAvailable()) {
         return;
       }
       window.addEventListener('scroll', this.delayedScroll);
       window.addEventListener('resize', this.delayedScroll);
     }
 
     componentWillUnmount() {
-      if (typeof window === 'undefined') {
+      if (typeof window == 'undefined' || isIntersectionObserverAvailable()) {
         return;
       }
       window.removeEventListener('scroll', this.delayedScroll);
       window.removeEventListener('resize', this.delayedScroll);
     }
 
     onChangeScroll() {
+      if (isIntersectionObserverAvailable()) {
+        return;
+      }
       this.setState({
         scrollPosition: {
           x: (typeof window == 'undefined' ?
@@ -63,10 +71,12 @@ const trackWindowScroll = (BaseComponent) => {
 
     render() {
       const { delayMethod, delayTime, ...props } = this.props;
+      const scrollPosition = isIntersectionObserverAvailable() ?
+        null : this.state.scrollPosition;
 
       return (
         <BaseComponent
-          scrollPosition={this.state.scrollPosition}
+          scrollPosition={scrollPosition}
           {...props} />
       );
     }

src/utils/intersection-observer.js

@@ -0,0 +1,6 @@
+export default function() {
+  return (
+    'IntersectionObserver' in window &&
+    'isIntersecting' in window.IntersectionObserverEntry.prototype
+  );
+}