react-lazyload - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/index.js

@@ -51,6 +51,11 @@ /**
   if (elementTop < scrollTop + windowInnerHeight && elementTop + elementHeight > scrollTop) {
-    component.setState({
-      visible: true
-    });
 
+    // Avoid extra render if previously is visible, yeah I mean `render` call,
+    // not actual DOM render
+    if (!component.state.visible) {
+      component.setState({
+        visible: true
+      });
+    }
+
     if (component.props.once) {
@@ -110,2 +115,6 @@ pending.push(component);
 
+  LazyLoad.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
+    return nextState.visible;
+  };
+
   LazyLoad.prototype.componentWillUnmount = function componentWillUnmount() {
@@ -123,8 +132,6 @@ var index = listeners.indexOf(this);
 
-  LazyLoad.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
-    return nextState.visible;
-  };
-
   LazyLoad.prototype.render = function render() {
-    return _reactAddons.addons.cloneWithProps(this.props.children, { visible: this.state.visible });
+    return _reactAddons.addons.cloneWithProps(this.props.children, {
+      visible: this.state.visible
+    });
   };
@@ -131,0 +138,0 @@

package.json

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

README.md

@@ -11,2 +11,3 @@ # react-lazyload [![npm version](https://badge.fury.io/js/react-lazyload.svg)](http://badge.fury.io/js/react-lazyload)
  - Support both `one-time lazy load` and `continuous lazy load` mode
+ - `scroll` / `resize` event handler is debounced so you won't suffer with frequent update
  - IE 8 compatible
@@ -13,0 +14,0 @@

src/index.js

@@ -12,2 +12,3 @@ /**
 
+
 /**
@@ -37,6 +38,11 @@ * Detect if element is visible in viewport, if so, set `visible` state to true.
       ((elementTop + elementHeight) > scrollTop)) {
-    component.setState({
-      visible: true
-    });
 
+    // Avoid extra render if previously is visible, yeah I mean `render` call,
+    // not actual DOM render
+    if (!component.state.visible) {
+      component.setState({
+        visible: true
+      });
+    }
+
     if (component.props.once) {
@@ -96,2 +102,6 @@ pending.push(component);
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextState.visible;
+  }
+
   componentWillUnmount() {
@@ -109,8 +119,6 @@ const index = listeners.indexOf(this);
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return nextState.visible;
-  }
-
   render() {
-    return addons.cloneWithProps(this.props.children, {visible: this.state.visible});
+    return addons.cloneWithProps(this.props.children, {
+      visible: this.state.visible
+    });
   }
@@ -117,0 +125,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

17705

2.48%

Lines of code

409

3.02%

Number of lines in readme file

75

1.35%

No dependency changes