react-lazyload - npm Package Compare versions

Comparing version 1.6.0 to 1.6.1

lib/index.js

@@ -50,2 +50,3 @@ /**
   var scrollTop = parent.scrollTop;
+  var parentBottom = scrollTop + parent.offsetHeight;
 
@@ -57,5 +58,7 @@ var _node$getBoundingClientRect = node.getBoundingClientRect();
   var offsets = Array.isArray(component.props.offset) ? component.props.offset : [component.props.offset, component.props.offset]; // Be compatible with previous API
+
   var elementTop = node.offsetTop;
+  var elementBottom = elementTop + elementHeight;
 
-  return elementTop < scrollTop + offsets[0] && elementTop + elementHeight + offsets[1] > scrollTop;
+  return elementTop >= scrollTop + offsets[0] && elementBottom + offsets[1] <= parentBottom;
 };
@@ -84,6 +87,8 @@
   var windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
+  var elementBottom = elementTop + elementHeight;
+  var documentBottom = scrollTop + windowInnerHeight;
 
   var offsets = Array.isArray(component.props.offset) ? component.props.offset : [component.props.offset, component.props.offset]; // Be compatible with previous API
 
-  return elementTop < scrollTop + windowInnerHeight + offsets[0] && elementTop + elementHeight + offsets[1] > scrollTop;
+  return elementTop >= scrollTop + offsets[0] && elementBottom + offsets[1] <= documentBottom;
 };
@@ -164,6 +169,2 @@
 
-    if (props.scroll === true && props.wheel === true) {
-      console && console.warn('[react-lazyload] Don\'t use both `scroll` and `wheel` event in LazyLoad component, pick one!');
-    }
-
     this.state = {
@@ -175,8 +176,3 @@ visible: false
   LazyLoad.prototype.componentDidMount = function componentDidMount() {
-    if (listeners.length === 0) {
-      var _props = this.props;
-      var _scroll = _props.scroll;
-      var wheel = _props.wheel;
-      var resize = _props.resize;
-
+    if (!finalLazyLoadHandler) {
       if (this.props.throttle !== undefined) {
@@ -187,3 +183,14 @@ finalLazyLoadHandler = _utilsThrottle2['default'](lazyLoadHandler, typeof this.props.throttle === 'number' ? this.props.throttle : 300);
       }
+    }
 
+    if (this.props.overflow) {
+      var _parent = _utilsScrollParent2['default'](_reactDom2['default'].findDOMNode(this));
+      if (_parent && !this.scrollListened) {
+        _parent.addEventListener('scroll', finalLazyLoadHandler);
+      }
+    } else {
+      var _props = this.props;
+      var _scroll = _props.scroll;
+      var resize = _props.resize;
+
       if (_scroll) {
@@ -193,10 +200,2 @@ _utilsEvent.on(window, 'scroll', finalLazyLoadHandler);
 
-      if (wheel) {
-        if (window.hasOwnProperty('onwheel')) {
-          _utilsEvent.on(window, 'wheel', finalLazyLoadHandler);
-        } else {
-          _utilsEvent.on(window, 'mousewheel', finalLazyLoadHandler);
-        }
-      }
-
       if (resize) {
@@ -222,2 +221,10 @@ _utilsEvent.on(window, 'resize', finalLazyLoadHandler);
   LazyLoad.prototype.componentWillUnmount = function componentWillUnmount() {
+    if (this.props.overflow) {
+      var _parent2 = _utilsScrollParent2['default'](_reactDom2['default'].findDOMNode(this));
+      if (_parent2) {
+        _parent2.removeEventListener('scroll', finalLazyLoadHandler);
+        this.scrollListened = false;
+      }
+    }
+
     var index = listeners.indexOf(this);
@@ -280,5 +287,5 @@ if (index !== -1) {
   offset: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.arrayOf(_react.PropTypes.number)]),
+  overflow: _react.PropTypes.bool,
+  resize: _react.PropTypes.bool,
   scroll: _react.PropTypes.bool,
-  wheel: _react.PropTypes.bool,
-  resize: _react.PropTypes.bool,
   children: _react.PropTypes.node,
@@ -292,5 +299,5 @@ throttle: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.bool]),
   offset: 0,
-  scroll: true,
-  wheel: false,
-  resize: false
+  overflow: false,
+  resize: false,
+  scroll: true
 };
@@ -297,0 +304,0 @@

lib/utils/scrollParent.js

@@ -23,7 +23,7 @@ /**
 
-    var _parent$style = parent.style;
-    var position = _parent$style.position;
-    var overflow = _parent$style.overflow;
-    var overflowX = _parent$style.overflowX;
-    var overflowY = _parent$style.overflowY;
+    var style = window.getComputedStyle(parent);
+    var position = style.position;
+    var overflow = style.overflow;
+    var overflowX = style['overflow-x'];
+    var overflowY = style['overflow-y'];
 
@@ -30,0 +30,0 @@ if (position === 'static' && excludeStaticParent) {

package.json

 {
   "name": "react-lazyload",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Lazyload your Component, Image or anything matters the performance.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -113,7 +113,7 @@ # react-lazyload [![npm version](https://badge.fury.io/js/react-lazyload.svg)](http://badge.fury.io/js/react-lazyload)
 
-### wheel
+### overflow
 
 Type: Bool Default: false
 
-For overflow containers, scroll event not propagated to `window`, so you should use `wheel` props to make LazyLoad listen `wheel` event instead of `scroll`. Check [this demo](https://jasonslyvia.github.io/react-lazyload/examples/overflow.html) for detail.
+If lazy loading components inside a overflow container, set this to `true`. Also make sure a `position` property other than `static` has been set to your overflow container.
 
@@ -120,0 +120,0 @@ ### resize

src/index.js

@@ -26,2 +26,3 @@ /**
   const scrollTop = parent.scrollTop;
+  const parentBottom = scrollTop + parent.offsetHeight;
   const { height: elementHeight } = node.getBoundingClientRect();
@@ -32,6 +33,8 @@
                 [component.props.offset, component.props.offset]; // Be compatible with previous API
+
   const elementTop = node.offsetTop;
+  const elementBottom = elementTop + elementHeight;
 
-  return (elementTop < (scrollTop + offsets[0])) &&
-         ((elementTop + elementHeight + offsets[1]) > scrollTop);
+  return (elementTop >= (scrollTop + offsets[0])) &&
+         ((elementBottom + offsets[1]) <= parentBottom);
 };
@@ -60,2 +63,4 @@
   const windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
+  const elementBottom = elementTop + elementHeight;
+  const documentBottom = scrollTop + windowInnerHeight;
 
@@ -66,4 +71,4 @@ const offsets = Array.isArray(component.props.offset) ?
 
-  return (elementTop < (scrollTop + windowInnerHeight + offsets[0])) &&
-         ((elementTop + elementHeight + offsets[1]) > scrollTop);
+  return (elementTop >= (scrollTop + offsets[0])) &&
+         ((elementBottom + offsets[1]) <= documentBottom);
 };
@@ -146,6 +151,2 @@
 
-    if (props.scroll === true && props.wheel === true) {
-      console && console.warn('[react-lazyload] Don\'t use both `scroll` and `wheel` event in LazyLoad component, pick one!');
-    }
-
     this.state = {
@@ -157,5 +158,3 @@ visible: false
   componentDidMount() {
-    if (listeners.length === 0) {
-      const { scroll, wheel, resize } = this.props;
-
+    if (!finalLazyLoadHandler) {
       if (this.props.throttle !== undefined) {
@@ -170,3 +169,12 @@ finalLazyLoadHandler = throttle(lazyLoadHandler, typeof this.props.throttle === 'number' ?
       }
+    }
 
+    if (this.props.overflow) {
+      const parent = scrollParent(ReactDom.findDOMNode(this));
+      if (parent && !this.scrollListened) {
+        parent.addEventListener('scroll', finalLazyLoadHandler);
+      }
+    } else {
+      const { scroll, resize } = this.props;
+
       if (scroll) {
@@ -176,10 +184,2 @@ on(window, 'scroll', finalLazyLoadHandler);
 
-      if (wheel) {
-        if (window.hasOwnProperty('onwheel')) {
-          on(window, 'wheel', finalLazyLoadHandler);
-        } else {
-          on(window, 'mousewheel', finalLazyLoadHandler);
-        }
-      }
-
       if (resize) {
@@ -205,2 +205,10 @@ on(window, 'resize', finalLazyLoadHandler);
   componentWillUnmount() {
+    if (this.props.overflow) {
+      const parent = scrollParent(ReactDom.findDOMNode(this));
+      if (parent) {
+        parent.removeEventListener('scroll', finalLazyLoadHandler);
+        this.scrollListened = false;
+      }
+    }
+
     const index = listeners.indexOf(this);
@@ -254,3 +262,3 @@ if (index !== -1) {
       visible: this.state.visible,
-      firstTimeVisible: this._firstTimeVisible
+      firstTimeVisible: this._firstTimeVisible,
     });
@@ -263,5 +271,5 @@ }
   offset: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  overflow: PropTypes.bool,
+  resize: PropTypes.bool,
   scroll: PropTypes.bool,
-  wheel: PropTypes.bool,
-  resize: PropTypes.bool,
   children: PropTypes.node,
@@ -275,5 +283,5 @@ throttle: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
   offset: 0,
-  scroll: true,
-  wheel: false,
+  overflow: false,
   resize: false,
+  scroll: true
 };
@@ -280,0 +288,0 @@

src/utils/scrollParent.js

@@ -14,3 +14,3 @@ /**
 
-  while(parent) {
+  while (parent) {
     if (!parent.parentNode) {
@@ -20,3 +20,8 @@ return node.ownerDocument || document;
 
-    const { position, overflow, overflowX, overflowY } = parent.style;
+    const style = window.getComputedStyle(parent);
+    const position = style.position;
+    const overflow = style.overflow;
+    const overflowX = style['overflow-x'];
+    const overflowY = style['overflow-y'];
+
     if (position === 'static' && excludeStaticParent) {
@@ -34,2 +39,2 @@ continue;
   return node.ownerDocument || document;
-}
+};

No alert changes

Improved metrics

Total package byte prevSize

282481

0.19%

Lines of code

6312

0.3%

No dependency changes