react-lazy-load-image-component - npm Package Compare versions

Comparing version 1.1.2 to 1.1.4

build/index.js

@@ -1,1 +0,1 @@
-module.exports=function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=6)}([function(e,t){e.exports=require("react")},function(e,t,r){e.exports=r(8)()},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),n=u(r(0)),i=r(1),a=u(r(3)),l=u(r(11));function u(e){return e&&e.__esModule?e:{default:e}}var c=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e)),o=e.afterLoad,n=e.beforeLoad,i=e.scrollPosition,a=e.visibleByDefault;return r.state={visible:a},a&&(n(),o()),r.onVisible=r.onVisible.bind(r),r.isScrollTracked=i&&Number.isFinite(i.x)&&i.x>=0&&Number.isFinite(i.y)&&i.y>=0,r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,n.default.Component),o(t,[{key:"componentDidUpdate",value:function(e,t){t.visible!==this.state.visible&&this.props.afterLoad()}},{key:"onVisible",value:function(){this.props.beforeLoad(),this.setState({visible:!0})}},{key:"render",value:function(){if(this.state.visible)return this.props.children;var e=this.props,t=e.className,r=e.height,o=e.placeholder,i=e.scrollPosition,u=e.style,c=e.threshold,f=e.width;return this.isScrollTracked?n.default.createElement(a.default,{className:t,height:r,onVisible:this.onVisible,placeholder:o,scrollPosition:i,style:u,threshold:c,width:f}):n.default.createElement(l.default,{className:t,height:r,onVisible:this.onVisible,placeholder:o,style:u,threshold:c,width:f})}}]),t}();c.propTypes={afterLoad:i.PropTypes.func,beforeLoad:i.PropTypes.func,visibleByDefault:i.PropTypes.bool},c.defaultProps={afterLoad:function(){return{}},beforeLoad:function(){return{}},visibleByDefault:!1},t.default=c},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),i=u(r(0)),a=u(r(10)),l=r(1);function u(e){return e&&e.__esModule?e:{default:e}}var c=function(e){function t(e){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),n(t,[{key:"componentDidMount",value:function(){this.updateVisibility()}},{key:"componentDidUpdate",value:function(){this.updateVisibility()}},{key:"getPlaceholderBoundingBox",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.scrollPosition,t=this.placeholder.getBoundingClientRect(),r=a.default.findDOMNode(this.placeholder).style,o=parseInt(r.getPropertyValue("margin-left"),10)||0,n=parseInt(r.getPropertyValue("margin-top"),10)||0;return{bottom:e.y+t.bottom+n,left:e.x+t.left+o,right:e.x+t.right+o,top:e.y+t.top+n}}},{key:"isPlaceholderInViewport",value:function(){if(!this.placeholder)return!1;var e=this.props,t=e.scrollPosition,r=e.threshold,o=this.getPlaceholderBoundingBox(t),n=t.y+window.innerHeight,i=t.x,a=t.x+window.innerWidth,l=t.y;return Boolean(l-r<=o.bottom&&n+r>=o.top&&i-r<=o.right&&a+r>=o.left)}},{key:"updateVisibility",value:function(){this.isPlaceholderInViewport()&&this.props.onVisible()}},{key:"render",value:function(){var e=this,t=this.props,r=t.className,n=t.height,a=t.placeholder,l=t.style,u=t.width;return a?i.default.cloneElement(a,{ref:function(t){return e.placeholder=t}}):i.default.createElement("span",{className:r,ref:function(t){return e.placeholder=t},style:o({display:"inline-block",height:n,width:u},l)})}}]),t}();c.propTypes={onVisible:l.PropTypes.func.isRequired,scrollPosition:l.PropTypes.shape({x:l.PropTypes.number.isRequired,y:l.PropTypes.number.isRequired}).isRequired,className:l.PropTypes.string,height:l.PropTypes.number,placeholder:l.PropTypes.element,threshold:l.PropTypes.number,width:l.PropTypes.number},c.defaultProps={className:"",height:0,placeholder:null,threshold:100,width:0},t.default=c},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),i=c(r(0)),a=r(1),l=c(r(12)),u=c(r(13));function c(e){return e&&e.__esModule?e:{default:e}}t.default=function(e){var t=function(t){function r(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,r);var t=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e)),o=t.onChangeScroll.bind(t);return"debounce"===e.delayMethod?t.delayedScroll=(0,l.default)(o,e.delayTime):"throttle"===e.delayMethod&&(t.delayedScroll=(0,u.default)(o,e.delayTime)),t.state={scrollPosition:{x:window.scrollX||window.pageXOffset,y:window.scrollY||window.pageYOffset}},t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(r,i.default.Component),n(r,[{key:"componentDidMount",value:function(){window.addEventListener("scroll",this.delayedScroll),window.addEventListener("resize",this.delayedScroll)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.delayedScroll),window.removeEventListener("resize",this.delayedScroll)}},{key:"onChangeScroll",value:function(){this.setState({scrollPosition:{x:window.scrollX||window.pageXOffset,y:window.scrollY||window.pageYOffset}})}},{key:"render",value:function(){var t=this.props,r=(t.delayMethod,t.delayTime,function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}(t,["delayMethod","delayTime"]));return i.default.createElement(e,o({scrollPosition:this.state.scrollPosition},r))}}]),r}();return t.propTypes={delayMethod:a.PropTypes.oneOf(["debounce","throttle"]),delayTime:a.PropTypes.number},t.defaultProps={delayMethod:"throttle",delayTime:300},t}},function(e,t){var r;r=function(){return this}();try{r=r||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(r=window)}e.exports=r},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.trackWindowScroll=t.LazyLoadComponent=t.LazyLoadImage=void 0;var o=a(r(7)),n=a(r(2)),i=a(r(4));function a(e){return e&&e.__esModule?e:{default:e}}t.LazyLoadImage=o.default,t.LazyLoadComponent=n.default,t.trackWindowScroll=i.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),i=u(r(0)),a=r(1),l=u(r(2));function u(e){return e&&e.__esModule?e:{default:e}}var c=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={loaded:!1},r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),n(t,[{key:"onImageLoad",value:function(){var e=this;return this.state.loaded?null:function(){e.props.afterLoad(),e.setState({loaded:!0})}}},{key:"getImg",value:function(){var e=this.props,t=(e.afterLoad,e.beforeLoad,e.delayMethod,e.delayTime,e.effect,e.placeholder,e.placeholderSrc,e.scrollPosition,e.threshold,e.visibleByDefault,e.wrapperClassName,function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}(e,["afterLoad","beforeLoad","delayMethod","delayTime","effect","placeholder","placeholderSrc","scrollPosition","threshold","visibleByDefault","wrapperClassName"]));return i.default.createElement("img",o({onLoad:this.onImageLoad()},t))}},{key:"getLazyLoadImage",value:function(e){var t=this.props,r=t.beforeLoad,o=t.className,n=t.delayMethod,a=t.delayTime,u=t.height,c=t.placeholder,f=t.scrollPosition,s=t.style,p=t.threshold,d=t.visibleByDefault,y=t.width;return i.default.createElement(l.default,{beforeLoad:r,className:o,delayMethod:n,delayTime:a,height:u,placeholder:c,scrollPosition:f,style:s,threshold:p,visibleByDefault:d,width:y},e)}},{key:"getWrappedLazyLoadImage",value:function(e){var t=this.props,r=t.effect,o=t.height,n=t.placeholderSrc,a=t.width,l=t.wrapperClassName,u=this.state.loaded?" lazy-load-image-loaded":"";return i.default.createElement("span",{className:l+" lazy-load-image-background "+r+u,style:{backgroundImage:"url( "+n+")",backgroundSize:"100% 100%",color:"transparent",display:"inline-block",height:o,width:a}},e)}},{key:"render",value:function(){var e=this.props,t=e.effect,r=e.placeholderSrc,o=e.visibleByDefault,n=this.state.loaded,i=this.getImg(),a=n?i:this.getLazyLoadImage(i);return!t&&!r||o?a:this.getWrappedLazyLoadImage(a)}}]),t}();c.propTypes={afterLoad:a.PropTypes.func,effect:a.PropTypes.string,placeholderSrc:a.PropTypes.string},c.defaultProps={afterLoad:function(){return{}},effect:""},t.default=c},function(e,t,r){"use strict";var o=r(9);function n(){}e.exports=function(){function e(e,t,r,n,i,a){if(a!==o){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t){e.exports=require("react-dom")},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),n=l(r(0)),i=l(r(3)),a=l(r(4));function l(e){return e&&e.__esModule?e:{default:e}}var u=function(e){function t(e){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,n.default.Component),o(t,[{key:"render",value:function(){return n.default.createElement(i.default,this.props)}}]),t}();t.default=(0,a.default)(u)},function(e,t,r){(function(t){var r="Expected a function",o=NaN,n="[object Symbol]",i=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,u=/^0o[0-7]+$/i,c=parseInt,f="object"==typeof t&&t&&t.Object===Object&&t,s="object"==typeof self&&self&&self.Object===Object&&self,p=f||s||Function("return this")(),d=Object.prototype.toString,y=Math.max,h=Math.min,b=function(){return p.Date.now()};function v(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function m(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&d.call(e)==n}(e))return o;if(v(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=v(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(i,"");var r=l.test(e);return r||u.test(e)?c(e.slice(2),r?2:8):a.test(e)?o:+e}e.exports=function(e,t,o){var n,i,a,l,u,c,f=0,s=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(r);function g(t){var r=n,o=i;return n=i=void 0,f=t,l=e.apply(o,r)}function w(e){var r=e-c;return void 0===c||r>=t||r<0||p&&e-f>=a}function O(){var e=b();if(w(e))return P(e);u=setTimeout(O,function(e){var r=t-(e-c);return p?h(r,a-(e-f)):r}(e))}function P(e){return u=void 0,d&&n?g(e):(n=i=void 0,l)}function _(){var e=b(),r=w(e);if(n=arguments,i=this,c=e,r){if(void 0===u)return function(e){return f=e,u=setTimeout(O,t),s?g(e):l}(c);if(p)return u=setTimeout(O,t),g(c)}return void 0===u&&(u=setTimeout(O,t)),l}return t=m(t)||0,v(o)&&(s=!!o.leading,a=(p="maxWait"in o)?y(m(o.maxWait)||0,t):a,d="trailing"in o?!!o.trailing:d),_.cancel=function(){void 0!==u&&clearTimeout(u),f=0,n=c=i=u=void 0},_.flush=function(){return void 0===u?l:P(b())},_}}).call(this,r(5))},function(e,t,r){(function(t){var r="Expected a function",o=NaN,n="[object Symbol]",i=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,u=/^0o[0-7]+$/i,c=parseInt,f="object"==typeof t&&t&&t.Object===Object&&t,s="object"==typeof self&&self&&self.Object===Object&&self,p=f||s||Function("return this")(),d=Object.prototype.toString,y=Math.max,h=Math.min,b=function(){return p.Date.now()};function v(e,t,o){var n,i,a,l,u,c,f=0,s=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(r);function v(t){var r=n,o=i;return n=i=void 0,f=t,l=e.apply(o,r)}function w(e){var r=e-c;return void 0===c||r>=t||r<0||p&&e-f>=a}function O(){var e=b();if(w(e))return P(e);u=setTimeout(O,function(e){var r=t-(e-c);return p?h(r,a-(e-f)):r}(e))}function P(e){return u=void 0,d&&n?v(e):(n=i=void 0,l)}function _(){var e=b(),r=w(e);if(n=arguments,i=this,c=e,r){if(void 0===u)return function(e){return f=e,u=setTimeout(O,t),s?v(e):l}(c);if(p)return u=setTimeout(O,t),v(c)}return void 0===u&&(u=setTimeout(O,t)),l}return t=g(t)||0,m(o)&&(s=!!o.leading,a=(p="maxWait"in o)?y(g(o.maxWait)||0,t):a,d="trailing"in o?!!o.trailing:d),_.cancel=function(){void 0!==u&&clearTimeout(u),f=0,n=c=i=u=void 0},_.flush=function(){return void 0===u?l:P(b())},_}function m(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function g(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&d.call(e)==n}(e))return o;if(m(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=m(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(i,"");var r=l.test(e);return r||u.test(e)?c(e.slice(2),r?2:8):a.test(e)?o:+e}e.exports=function(e,t,o){var n=!0,i=!0;if("function"!=typeof e)throw new TypeError(r);return m(o)&&(n="leading"in o?!!o.leading:n,i="trailing"in o?!!o.trailing:i),v(e,t,{leading:n,maxWait:t,trailing:i})}}).call(this,r(5))}]);
+module.exports=function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=6)}([function(e,t){e.exports=require("react")},function(e,t,r){e.exports=r(8)()},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),n=u(r(0)),i=r(1),a=u(r(3)),l=u(r(11));function u(e){return e&&e.__esModule?e:{default:e}}var c=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e)),o=e.afterLoad,n=e.beforeLoad,i=e.scrollPosition,a=e.visibleByDefault;return r.state={visible:a},a&&(n(),o()),r.onVisible=r.onVisible.bind(r),r.isScrollTracked=i&&Number.isFinite(i.x)&&i.x>=0&&Number.isFinite(i.y)&&i.y>=0,r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,n.default.Component),o(t,[{key:"componentDidUpdate",value:function(e,t){t.visible!==this.state.visible&&this.props.afterLoad()}},{key:"onVisible",value:function(){this.props.beforeLoad(),this.setState({visible:!0})}},{key:"render",value:function(){if(this.state.visible)return this.props.children;var e=this.props,t=e.className,r=e.height,o=e.placeholder,i=e.scrollPosition,u=e.style,c=e.threshold,s=e.width;return this.isScrollTracked?n.default.createElement(a.default,{className:t,height:r,onVisible:this.onVisible,placeholder:o,scrollPosition:i,style:u,threshold:c,width:s}):n.default.createElement(l.default,{className:t,height:r,onVisible:this.onVisible,placeholder:o,style:u,threshold:c,width:s})}}]),t}();c.propTypes={afterLoad:i.PropTypes.func,beforeLoad:i.PropTypes.func,visibleByDefault:i.PropTypes.bool},c.defaultProps={afterLoad:function(){return{}},beforeLoad:function(){return{}},visibleByDefault:!1},t.default=c},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),i=u(r(0)),a=u(r(10)),l=r(1);function u(e){return e&&e.__esModule?e:{default:e}}var c=function(e){function t(e){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),n(t,[{key:"componentDidMount",value:function(){this.updateVisibility()}},{key:"componentDidUpdate",value:function(){this.updateVisibility()}},{key:"getPlaceholderBoundingBox",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.scrollPosition,t=this.placeholder.getBoundingClientRect(),r=a.default.findDOMNode(this.placeholder).style,o=parseInt(r.getPropertyValue("margin-left"),10)||0,n=parseInt(r.getPropertyValue("margin-top"),10)||0;return{bottom:e.y+t.bottom+n,left:e.x+t.left+o,right:e.x+t.right+o,top:e.y+t.top+n}}},{key:"isPlaceholderInViewport",value:function(){if(!this.placeholder)return!1;var e=this.props,t=e.scrollPosition,r=e.threshold,o=this.getPlaceholderBoundingBox(t),n=t.y+window.innerHeight,i=t.x,a=t.x+window.innerWidth,l=t.y;return Boolean(l-r<=o.bottom&&n+r>=o.top&&i-r<=o.right&&a+r>=o.left)}},{key:"updateVisibility",value:function(){this.isPlaceholderInViewport()&&this.props.onVisible()}},{key:"render",value:function(){var e=this,t=this.props,r=t.className,n=t.height,a=t.placeholder,l=t.style,u=t.width;return a&&"function"!=typeof a.type?i.default.cloneElement(a,{ref:function(t){return e.placeholder=t}}):i.default.createElement("span",{className:r,ref:function(t){return e.placeholder=t},style:o({display:"inline-block",height:n,width:u},l)},a)}}]),t}();c.propTypes={onVisible:l.PropTypes.func.isRequired,scrollPosition:l.PropTypes.shape({x:l.PropTypes.number.isRequired,y:l.PropTypes.number.isRequired}).isRequired,className:l.PropTypes.string,height:l.PropTypes.number,placeholder:l.PropTypes.element,threshold:l.PropTypes.number,width:l.PropTypes.number},c.defaultProps={className:"",height:0,placeholder:null,threshold:100,width:0},t.default=c},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),i=c(r(0)),a=r(1),l=c(r(12)),u=c(r(13));function c(e){return e&&e.__esModule?e:{default:e}}t.default=function(e){var t=function(t){function r(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,r);var t=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e)),o=t.onChangeScroll.bind(t);return"debounce"===e.delayMethod?t.delayedScroll=(0,l.default)(o,e.delayTime):"throttle"===e.delayMethod&&(t.delayedScroll=(0,u.default)(o,e.delayTime)),t.state={scrollPosition:{x:window.scrollX||window.pageXOffset,y:window.scrollY||window.pageYOffset}},t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(r,i.default.Component),n(r,[{key:"componentDidMount",value:function(){window.addEventListener("scroll",this.delayedScroll),window.addEventListener("resize",this.delayedScroll)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.delayedScroll),window.removeEventListener("resize",this.delayedScroll)}},{key:"onChangeScroll",value:function(){this.setState({scrollPosition:{x:window.scrollX||window.pageXOffset,y:window.scrollY||window.pageYOffset}})}},{key:"render",value:function(){var t=this.props,r=(t.delayMethod,t.delayTime,function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}(t,["delayMethod","delayTime"]));return i.default.createElement(e,o({scrollPosition:this.state.scrollPosition},r))}}]),r}();return t.propTypes={delayMethod:a.PropTypes.oneOf(["debounce","throttle"]),delayTime:a.PropTypes.number},t.defaultProps={delayMethod:"throttle",delayTime:300},t}},function(e,t){var r;r=function(){return this}();try{r=r||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(r=window)}e.exports=r},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.trackWindowScroll=t.LazyLoadComponent=t.LazyLoadImage=void 0;var o=a(r(7)),n=a(r(2)),i=a(r(4));function a(e){return e&&e.__esModule?e:{default:e}}t.LazyLoadImage=o.default,t.LazyLoadComponent=n.default,t.trackWindowScroll=i.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),i=u(r(0)),a=r(1),l=u(r(2));function u(e){return e&&e.__esModule?e:{default:e}}var c=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={loaded:!1},r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),n(t,[{key:"onImageLoad",value:function(){var e=this;return this.state.loaded?null:function(){e.props.afterLoad(),e.setState({loaded:!0})}}},{key:"getImg",value:function(){var e=this.props,t=(e.afterLoad,e.beforeLoad,e.delayMethod,e.delayTime,e.effect,e.placeholder,e.placeholderSrc,e.scrollPosition,e.threshold,e.visibleByDefault,e.wrapperClassName,function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}(e,["afterLoad","beforeLoad","delayMethod","delayTime","effect","placeholder","placeholderSrc","scrollPosition","threshold","visibleByDefault","wrapperClassName"]));return i.default.createElement("img",o({onLoad:this.onImageLoad()},t))}},{key:"getLazyLoadImage",value:function(e){var t=this.props,r=t.beforeLoad,o=t.className,n=t.delayMethod,a=t.delayTime,u=t.height,c=t.placeholder,s=t.scrollPosition,f=t.style,p=t.threshold,d=t.visibleByDefault,y=t.width;return i.default.createElement(l.default,{beforeLoad:r,className:o,delayMethod:n,delayTime:a,height:u,placeholder:c,scrollPosition:s,style:f,threshold:p,visibleByDefault:d,width:y},e)}},{key:"getWrappedLazyLoadImage",value:function(e){var t=this.props,r=t.effect,o=t.height,n=t.placeholderSrc,a=t.width,l=t.wrapperClassName,u=this.state.loaded?" lazy-load-image-loaded":"";return i.default.createElement("span",{className:l+" lazy-load-image-background "+r+u,style:{backgroundImage:"url( "+n+")",backgroundSize:"100% 100%",color:"transparent",display:"inline-block",height:o,width:a}},e)}},{key:"render",value:function(){var e=this.props,t=e.effect,r=e.placeholderSrc,o=e.visibleByDefault,n=this.state.loaded,i=this.getImg(),a=n?i:this.getLazyLoadImage(i);return!t&&!r||o?a:this.getWrappedLazyLoadImage(a)}}]),t}();c.propTypes={afterLoad:a.PropTypes.func,beforeLoad:a.PropTypes.func,delayMethod:a.PropTypes.string,delayTime:a.PropTypes.number,effect:a.PropTypes.string,placeholderSrc:a.PropTypes.string,threshold:a.PropTypes.number,visibleByDefault:a.PropTypes.bool,wrapperClassName:a.PropTypes.string},c.defaultProps={afterLoad:function(){return{}},beforeLoad:function(){return{}},delayMethod:"throttle",delayTime:300,effect:"",placeholderSrc:"",threshold:100,visibleByDefault:!1,wrapperClassName:""},t.default=c},function(e,t,r){"use strict";var o=r(9);function n(){}e.exports=function(){function e(e,t,r,n,i,a){if(a!==o){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t){e.exports=require("react-dom")},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),n=l(r(0)),i=l(r(3)),a=l(r(4));function l(e){return e&&e.__esModule?e:{default:e}}var u=function(e){function t(e){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,n.default.Component),o(t,[{key:"render",value:function(){return n.default.createElement(i.default,this.props)}}]),t}();t.default=(0,a.default)(u)},function(e,t,r){(function(t){var r="Expected a function",o=NaN,n="[object Symbol]",i=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,u=/^0o[0-7]+$/i,c=parseInt,s="object"==typeof t&&t&&t.Object===Object&&t,f="object"==typeof self&&self&&self.Object===Object&&self,p=s||f||Function("return this")(),d=Object.prototype.toString,y=Math.max,h=Math.min,b=function(){return p.Date.now()};function v(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function m(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&d.call(e)==n}(e))return o;if(v(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=v(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(i,"");var r=l.test(e);return r||u.test(e)?c(e.slice(2),r?2:8):a.test(e)?o:+e}e.exports=function(e,t,o){var n,i,a,l,u,c,s=0,f=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(r);function g(t){var r=n,o=i;return n=i=void 0,s=t,l=e.apply(o,r)}function w(e){var r=e-c;return void 0===c||r>=t||r<0||p&&e-s>=a}function O(){var e=b();if(w(e))return P(e);u=setTimeout(O,function(e){var r=t-(e-c);return p?h(r,a-(e-s)):r}(e))}function P(e){return u=void 0,d&&n?g(e):(n=i=void 0,l)}function _(){var e=b(),r=w(e);if(n=arguments,i=this,c=e,r){if(void 0===u)return function(e){return s=e,u=setTimeout(O,t),f?g(e):l}(c);if(p)return u=setTimeout(O,t),g(c)}return void 0===u&&(u=setTimeout(O,t)),l}return t=m(t)||0,v(o)&&(f=!!o.leading,a=(p="maxWait"in o)?y(m(o.maxWait)||0,t):a,d="trailing"in o?!!o.trailing:d),_.cancel=function(){void 0!==u&&clearTimeout(u),s=0,n=c=i=u=void 0},_.flush=function(){return void 0===u?l:P(b())},_}}).call(this,r(5))},function(e,t,r){(function(t){var r="Expected a function",o=NaN,n="[object Symbol]",i=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,u=/^0o[0-7]+$/i,c=parseInt,s="object"==typeof t&&t&&t.Object===Object&&t,f="object"==typeof self&&self&&self.Object===Object&&self,p=s||f||Function("return this")(),d=Object.prototype.toString,y=Math.max,h=Math.min,b=function(){return p.Date.now()};function v(e,t,o){var n,i,a,l,u,c,s=0,f=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(r);function v(t){var r=n,o=i;return n=i=void 0,s=t,l=e.apply(o,r)}function w(e){var r=e-c;return void 0===c||r>=t||r<0||p&&e-s>=a}function O(){var e=b();if(w(e))return P(e);u=setTimeout(O,function(e){var r=t-(e-c);return p?h(r,a-(e-s)):r}(e))}function P(e){return u=void 0,d&&n?v(e):(n=i=void 0,l)}function _(){var e=b(),r=w(e);if(n=arguments,i=this,c=e,r){if(void 0===u)return function(e){return s=e,u=setTimeout(O,t),f?v(e):l}(c);if(p)return u=setTimeout(O,t),v(c)}return void 0===u&&(u=setTimeout(O,t)),l}return t=g(t)||0,m(o)&&(f=!!o.leading,a=(p="maxWait"in o)?y(g(o.maxWait)||0,t):a,d="trailing"in o?!!o.trailing:d),_.cancel=function(){void 0!==u&&clearTimeout(u),s=0,n=c=i=u=void 0},_.flush=function(){return void 0===u?l:P(b())},_}function m(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function g(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&d.call(e)==n}(e))return o;if(m(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=m(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(i,"");var r=l.test(e);return r||u.test(e)?c(e.slice(2),r?2:8):a.test(e)?o:+e}e.exports=function(e,t,o){var n=!0,i=!0;if("function"!=typeof e)throw new TypeError(r);return m(o)&&(n="leading"in o?!!o.leading:n,i="trailing"in o?!!o.trailing:i),v(e,t,{leading:n,maxWait:t,trailing:i})}}).call(this,r(5))}]);

package.json

 {
   "name": "react-lazy-load-image-component",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": " React Component to lazy load images using a HOC to track window scroll position. ",
@@ -24,9 +24,9 @@ "main": "build/index.js",
     "css-loader": "^0.28.10",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.4.4",
+    "enzyme-adapter-react-16": "^1.2.0",
     "eslint": "^4.18.2",
     "eslint-loader": "^2.0.0",
     "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-react": "^7.7.0",
-    "jest": "^22.4.2",
+    "eslint-plugin-react": "^7.11.1",
+    "jest": "^23.5.0",
     "path": "^0.12.7",
@@ -36,3 +36,3 @@ "react": "^16.2.0",
     "style-loader": "^0.20.3",
-    "webpack": "^4.1.1",
+    "webpack": "^4.17.1",
     "webpack-cli": "^2.0.12"
@@ -45,2 +45,6 @@ },
   },
+  "jest": {
+    "verbose": true,
+    "testURL": "http://localhost/"
+  },
   "repository": {
@@ -47,0 +51,0 @@ "type": "git",

src/components/LazyLoadComponent.jsx

@@ -14,3 +14,3 @@ import React from 'react';
     this.state = {
-      visible: visibleByDefault
+      visible: visibleByDefault,
     };
@@ -39,3 +39,3 @@
     this.setState({
-      visible: true
+      visible: true,
     });
@@ -82,3 +82,3 @@ }
   beforeLoad: PropTypes.func,
-  visibleByDefault: PropTypes.bool
+  visibleByDefault: PropTypes.bool,
 };
@@ -89,5 +89,5 @@
   beforeLoad: () => ({}),
-  visibleByDefault: false
+  visibleByDefault: false,
 };
 
 export default LazyLoadComponent;

src/components/LazyLoadComponent.spec.js

@@ -0,1 +1,2 @@
+/* eslint max-len: 0 */
 import React from 'react';
@@ -14,3 +15,3 @@ import ReactTestUtils from 'react-dom/test-utils';
   scryRenderedComponentsWithType,
-  scryRenderedDOMComponentsWithTag
+  scryRenderedDOMComponentsWithTag,
 } = ReactTestUtils;
@@ -22,3 +23,3 @@
       <LazyLoadComponent
-        style={{marginTop: 100000}}>>
+        style={{ marginTop: 100000 }}>
         <p>Lorem Ipsum</p>
@@ -37,4 +38,4 @@ </LazyLoadComponent>
       <LazyLoadComponent
-        scrollPosition={{ x: 0, y: 0}}
-        style={{marginTop: 100000}}>>
+        scrollPosition={{ x: 0, y: 0 }}
+        style={{ marginTop: 100000 }}>
         <p>Lorem Ipsum</p>
@@ -70,3 +71,3 @@ </LazyLoadComponent>
         beforeLoad={beforeLoad}
-        style={{marginTop: 100000}}>
+        style={{ marginTop: 100000 }}>
         <p>Lorem Ipsum</p>
@@ -86,3 +87,3 @@ </LazyLoadComponent>
         afterLoad={afterLoad}
-        style={{marginTop: 100000}}>
+        style={{ marginTop: 100000 }}>
         <p>Lorem Ipsum</p>
@@ -104,3 +105,3 @@ </LazyLoadComponent>
         beforeLoad={beforeLoad}
-        style={{marginTop: 100000}}>
+        style={{ marginTop: 100000 }}>
         <p>Lorem Ipsum</p>
@@ -107,0 +108,0 @@ </LazyLoadComponent>

src/components/LazyLoadImage.jsx

@@ -11,3 +11,3 @@ import React from 'react';
     this.state = {
-      loaded: false
+      loaded: false,
     };
@@ -25,3 +25,3 @@ }
       this.setState({
-        loaded: true
+        loaded: true,
       });
@@ -81,3 +81,3 @@ };
           height: height,
-          width: width
+          width: width,
         }}>
@@ -107,4 +107,10 @@ {lazyLoadImage}
   afterLoad: PropTypes.func,
+  beforeLoad: PropTypes.func,
+  delayMethod: PropTypes.string,
+  delayTime: PropTypes.number,
   effect: PropTypes.string,
-  placeholderSrc: PropTypes.string
+  placeholderSrc: PropTypes.string,
+  threshold: PropTypes.number,
+  visibleByDefault: PropTypes.bool,
+  wrapperClassName: PropTypes.string,
 };
@@ -114,5 +120,12 @@
   afterLoad: () => ({}),
-  effect: ''
+  beforeLoad: () => ({}),
+  delayMethod: 'throttle',
+  delayTime: 300,
+  effect: '',
+  placeholderSrc: '',
+  threshold: 100,
+  visibleByDefault: false,
+  wrapperClassName: '',
 };
 
 export default LazyLoadImage;

src/components/LazyLoadImage.spec.js

@@ -0,1 +1,3 @@
+/* eslint max-len: 0 */
+/* eslint max-statements: 0 */
 import React from 'react';
@@ -16,3 +18,3 @@ import ReactTestUtils from 'react-dom/test-utils';
   scryRenderedDOMComponentsWithTag,
-  Simulate
+  Simulate,
 } = ReactTestUtils;
@@ -27,6 +29,6 @@
       placeholder: null,
-      scrollPosition: {x: 0, y: 0},
+      scrollPosition: { x: 0, y: 0 },
       style: {},
-      src: 'lorem-ipsum.jpg',
-      visibleByDefault: false
+      src: 'http://localhost/lorem-ipsum.jpg',
+      visibleByDefault: false,
     };
@@ -109,3 +111,3 @@ const lazyLoadImage = mount(
       <LazyLoadImage
-        placeholderSrc='lorem-ipsum.jpg'
+        placeholderSrc="lorem-ipsum.jpg"
         visibleByDefault={false} />
@@ -122,3 +124,3 @@ );
       <LazyLoadImage
-        placeholderSrc='lorem-ipsum.jpg'
+        placeholderSrc="lorem-ipsum.jpg"
         visibleByDefault={true} />
@@ -125,0 +127,0 @@ );

src/components/PlaceholderWithoutTracking.jsx

@@ -23,3 +23,3 @@ import React from 'react';
       left: parseInt(style.getPropertyValue('margin-left'), 10) || 0,
-      top: parseInt(style.getPropertyValue('margin-top'), 10) || 0
+      top: parseInt(style.getPropertyValue('margin-top'), 10) || 0,
     };
@@ -31,3 +31,3 @@
       right: scrollPosition.x + boundingRect.right + margin.left,
-      top: scrollPosition.y + boundingRect.top + margin.top
+      top: scrollPosition.y + boundingRect.top + margin.top,
     };
@@ -47,3 +47,3 @@ }
       right: scrollPosition.x + window.innerWidth,
-      top: scrollPosition.y
+      top: scrollPosition.y,
     };
@@ -66,3 +66,3 @@
 
-    if (placeholder) {
+    if (placeholder && typeof placeholder.type !== 'function') {
       return React.cloneElement(placeholder,
@@ -76,2 +76,3 @@ { ref: el => this.placeholder = el });
         style={{ display: 'inline-block', height, width, ...style }}>
+        {placeholder}
       </span>
@@ -86,3 +87,3 @@ );
     x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired
+    y: PropTypes.number.isRequired,
   }).isRequired,
@@ -93,3 +94,3 @@ className: PropTypes.string,
   threshold: PropTypes.number,
-  width: PropTypes.number
+  width: PropTypes.number,
 };
@@ -102,5 +103,5 @@
   threshold: 100,
-  width: 0
+  width: 0,
 };
 
 export default PlaceholderWithoutTracking;

src/hoc/trackWindowScroll.js

@@ -22,4 +22,4 @@ import React from 'react';
           x: window.scrollX || window.pageXOffset,
-          y: window.scrollY || window.pageYOffset
-        }
+          y: window.scrollY || window.pageYOffset,
+        },
       };
@@ -42,4 +42,4 @@ }
           x: window.scrollX || window.pageXOffset,
-          y: window.scrollY || window.pageYOffset
-        }
+          y: window.scrollY || window.pageYOffset,
+        },
       });
@@ -61,3 +61,3 @@ }
     delayMethod: PropTypes.oneOf(['debounce', 'throttle']),
-    delayTime: PropTypes.number
+    delayTime: PropTypes.number,
   };
@@ -67,3 +67,3 @@
     delayMethod: 'throttle',
-    delayTime: 300
+    delayTime: 300,
   };
@@ -70,0 +70,0 @@

webpack.config.js

@@ -10,3 +10,3 @@ const webpack = require('webpack');
     filename: 'index.js',
-    libraryTarget: 'commonjs2'
+    libraryTarget: 'commonjs2',
   },
@@ -20,3 +20,3 @@ module: {
         include: path.resolve(__dirname, 'src'),
-        exclude: /(node_modules|bower_components|build)/
+        exclude: /(node_modules|bower_components|build)/,
       }, {
@@ -29,16 +29,16 @@ test: /\.jsx?$/,
           options: {
-            presets: ['env']
-          }
-        }
+            presets: ['env'],
+          },
+        },
       }, {
         test: /\.css$/,
         loaders: ['style-loader', 'css-loader'],
-        exclude: /node_modules/
-      }
-    ]
+        exclude: /node_modules/,
+      },
+    ],
   },
   externals: {
-    'react': 'commonjs react',
+    react: 'commonjs react',
     'react-dom': 'commonjs react-dom',
-  }
+  },
 };

No alert changes

Improved metrics

Total package byte prevSize

60538

increased by4.11%

Lines of code

745

increased by7.81%

No dependency changes