release 2.0.0

README.md

@@ -9,13 +9,15 @@ Lazyload your Components, Images or anything matters the performance.
  - Take performance in mind, only 2 event listeners for all lazy-loaded components
  - Support both `one-time lazy load` and `continuous lazy load` mode
  - `scroll` / `resize` event handler is throttled so you won't suffer frequent update, you can switch to debounce mode too
- - IE 8 compatible
  - Decorator supported
+ - Thoroughly tested
 
 ## Installation
 
+> 2.0.0 is finally out, read [Upgrade Guide](https://github.com/jasonslyvia/react-lazyload/wiki/Upgrade-Guide), it's almost painless to upgrade!
+
 ```
-$ npm install --save react-lazyload@2.0.0
+$ npm install --save react-lazyload
 ```
 
 ## Usage

examples/index.html

@@ -78,6 +78,9 @@
     display: inline-block;
     font-size: 14px;
     margin: 0 10px;
+    text-decoration: underline;
+    color: blue;
+    cursor: pointer;
   }
   .overflow-wrapper h1 {
     margin-left: 290px;

lib/index.js

@@ -58,7 +58,7 @@ var checkOverflowVisible = function checkOverflowVisible(component, parent) {
   var elementTop = node.offsetTop;
   var elementBottom = elementTop + elementHeight;
 
-  return elementTop >= scrollTop - offsets[0] && elementBottom - offsets[1] <= parentBottom;
+  return elementTop - offsets[0] <= parentBottom && elementBottom + offsets[1] >= scrollTop;
 };
 
 /**
@@ -69,24 +69,24 @@ var checkOverflowVisible = function checkOverflowVisible(component, parent) {
 var checkNormalVisible = function checkNormalVisible(component) {
   var node = _reactDom2['default'].findDOMNode(component);
 
+  var supportPageOffset = window.pageXOffset !== undefined;
+  var isCSS1Compat = (document.compatMode || '') === 'CSS1Compat';
+  var scrollTop = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+
   var _node$getBoundingClientRect2 = node.getBoundingClientRect();
 
   var top = _node$getBoundingClientRect2.top;
   var elementHeight = _node$getBoundingClientRect2.height;
 
-  var supportPageOffset = window.pageXOffset !== undefined;
-  var isCSS1Compat = (document.compatMode || '') === 'CSS1Compat';
-
-  var scrollTop = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+  var elementTop = top + scrollTop; // element top relative to document
+  var elementBottom = elementTop + elementHeight;
 
-  var elementTop = top + scrollTop;
   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 - offsets[0] && elementBottom - offsets[1] <= documentBottom;
+  return elementTop - offsets[0] <= documentBottom && elementBottom + offsets[1] >= scrollTop;
 };
 
 /**
@@ -117,7 +117,7 @@ var checkVisible = function checkVisible(component) {
       component.visible = true;
       component.forceUpdate();
     }
-  } else {
+  } else if (!(component.props.once && component.visible)) {
     component.visible = false;
   }
 };
@@ -144,6 +144,7 @@ var lazyLoadHandler = function lazyLoadHandler() {
 };
 
 // Depending on component's props
+var delayType = undefined;
 var finalLazyLoadHandler = null;
 
 var LazyLoad = (function (_Component) {
@@ -155,14 +156,46 @@ var LazyLoad = (function (_Component) {
     _Component.call(this, props);
 
     this.visible = false;
+
+    if (_react2['default'].Children.count(this.props.children) > 1) {
+      console.warn('[react-lazyload] Only one child is allowed to be passed to `LazyLoad`.');
+    }
+
+    if (typeof this.props.height !== 'number') {
+      console.warn('[react-lazyload] Please add `height` props to <LazyLoad> for better performance.');
+    }
+
+    if (this.props.wheel) {
+      // eslint-disable-line
+      console.warn('[react-lazyload] Props `wheel` is not supported anymore, try set `overflow` for lazy loading in overflow containers.');
+    }
   }
 
   LazyLoad.prototype.componentDidMount = function componentDidMount() {
+    // It's unlikely to change delay type for an application, this is mainly
+    // designed for tests
+    var needResetFinalLazyLoadHandler = false;
+    if (this.props.debounce !== undefined && delayType === 'throttle') {
+      console.warn('[react-lazyload] Previous delay function is `throttle`, now switching to `debounce`, try set them unanimously');
+      needResetFinalLazyLoadHandler = true;
+    } else if (delayType === 'debounce' && this.props.debounce === undefined) {
+      console.warn('[react-lazyload] Previous delay function is `debounce`, now switching to `throttle`, try set them unanimously');
+      needResetFinalLazyLoadHandler = true;
+    }
+
+    if (needResetFinalLazyLoadHandler) {
+      _utilsEvent.off(window, 'scroll', finalLazyLoadHandler);
+      _utilsEvent.off(window, 'resize', finalLazyLoadHandler);
+      finalLazyLoadHandler = null;
+    }
+
     if (!finalLazyLoadHandler) {
       if (this.props.debounce !== undefined) {
         finalLazyLoadHandler = _utilsDebounce2['default'](lazyLoadHandler, typeof this.props.throttle === 'number' ? this.props.throttle : 300);
+        delayType = 'debounce';
       } else {
         finalLazyLoadHandler = _utilsThrottle2['default'](lazyLoadHandler, typeof this.props.debounce === 'number' ? this.props.debounce : 300);
+        delayType = 'throttle';
       }
     }
 
@@ -172,7 +205,7 @@ var LazyLoad = (function (_Component) {
         _parent.addEventListener('scroll', finalLazyLoadHandler);
         _parent.setAttribute(LISTEN_FLAG, 1);
       }
-    } else if (listeners.length === 0) {
+    } else if (listeners.length === 0 || needResetFinalLazyLoadHandler) {
       var _props = this.props;
       var _scroll = _props.scroll;
       var resize = _props.resize;
@@ -209,18 +242,12 @@ var LazyLoad = (function (_Component) {
     }
 
     if (listeners.length === 0) {
-      _utilsEvent.off(window, 'wheel', finalLazyLoadHandler);
-      _utilsEvent.off(window, 'mousewheel', finalLazyLoadHandler);
       _utilsEvent.off(window, 'resize', finalLazyLoadHandler);
       _utilsEvent.off(window, 'scroll', finalLazyLoadHandler);
     }
   };
 
   LazyLoad.prototype.render = function render() {
-    if (_react2['default'].Children.count(this.props.children) > 1) {
-      console.warn('[react-lazyload] Only one child is allowed to be passed to `LazyLoad`.');
-    }
-
     return this.visible ? this.props.children : _react2['default'].createElement('div', { style: { height: this.props.height }, className: 'lazyload-placeholder' });
   };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lazyload",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0",
   "description": "Lazyload your Component, Image or anything matters the performance.",
   "main": "lib/index.js",
   "scripts": {