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

Comparing version 1.3.2 to 1.4.0-beta.0

build/index.js

@@ -1,1 +0,1 @@
-module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},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 n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},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=8)}([function(e,t){e.exports=require("react")},function(e,t,r){e.exports=r(10)()},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){return"undefined"!=typeof window&&"IntersectionObserver"in window&&"isIntersecting"in window.IntersectionObserverEntry.prototype}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),o=s(r(0)),i=r(1),a=s(r(4)),l=s(r(12)),u=s(r(2));function s(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)),n=e.afterLoad,o=e.beforeLoad,i=e.scrollPosition,a=e.visibleByDefault;return r.state={visible:a},a&&(o(),n()),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,o.default.Component),n(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,n=e.placeholder,i=e.scrollPosition,s=e.style,c=e.threshold,f=e.width;return this.isScrollTracked||(0,u.default)()?o.default.createElement(a.default,{className:t,height:r,onVisible:this.onVisible,placeholder:n,scrollPosition:i,style:s,threshold:c,width:f}):o.default.createElement(l.default,{className:t,height:r,onVisible:this.onVisible,placeholder:n,style:s,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 n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),i=s(r(0)),a=s(r(5)),l=r(1),u=s(r(2));function s(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)),n=(0,u.default)();if(r.LAZY_LOAD_OBSERVER={supportsObserver:n},n){var o=e.threshold;r.LAZY_LOAD_OBSERVER.observer=new IntersectionObserver(r.checkIntersections,{rootMargin:o+"px"})}return 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),o(t,[{key:"checkIntersections",value:function(e){e.forEach(function(e){e.isIntersecting&&e.target.onVisible()})}},{key:"componentDidMount",value:function(){this.placeholder&&this.LAZY_LOAD_OBSERVER&&this.LAZY_LOAD_OBSERVER.observer&&(this.placeholder.onVisible=this.props.onVisible,this.LAZY_LOAD_OBSERVER.observer.observe(this.placeholder)),this.LAZY_LOAD_OBSERVER&&!this.LAZY_LOAD_OBSERVER.supportsObserver&&this.updateVisibility()}},{key:"componentWillUnMount",value:function(){this.LAZY_LOAD_OBSERVER&&this.LAZY_LOAD_OBSERVER.observer.unobserve(this.placeholder)}},{key:"componentDidUpdate",value:function(){this.LAZY_LOAD_OBSERVER&&!this.LAZY_LOAD_OBSERVER.supportsObserver&&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,n=parseInt(r.getPropertyValue("margin-left"),10)||0,o=parseInt(r.getPropertyValue("margin-top"),10)||0;return{bottom:e.y+t.bottom+o,left:e.x+t.left+n,right:e.x+t.right+n,top:e.y+t.top+o}}},{key:"isPlaceholderInViewport",value:function(){if("undefined"==typeof window||!this.placeholder)return!1;var e=this.props,t=e.scrollPosition,r=e.threshold,n=this.getPlaceholderBoundingBox(t),o=t.y+window.innerHeight,i=t.x,a=t.x+window.innerWidth,l=t.y;return Boolean(l-r<=n.bottom&&o+r>=n.top&&i-r<=n.right&&a+r>=n.left)}},{key:"updateVisibility",value:function(){this.isPlaceholderInViewport()&&this.props.onVisible()}},{key:"render",value:function(){var e=this,t=this.props,r=t.className,o=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:n({display:"inline-block",height:o,width:u},l)},a)}}]),t}();c.propTypes={onVisible:l.PropTypes.func.isRequired,className:l.PropTypes.string,height:l.PropTypes.number,placeholder:l.PropTypes.element,threshold:l.PropTypes.number,scrollPosition:l.PropTypes.shape({x:l.PropTypes.number.isRequired,y:l.PropTypes.number.isRequired}),width:l.PropTypes.number},c.defaultProps={className:"",height:0,placeholder:null,threshold:100,width:0},t.default=c},function(e,t){e.exports=require("react-dom")},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),i=p(r(0)),a=p(r(5)),l=r(1),u=p(r(13)),s=p(r(14)),c=p(r(2)),f=p(r(15));function p(e){return e&&e.__esModule?e:{default:e}}function d(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}var y=function(){return"undefined"==typeof window?0:window.scrollX||window.pageXOffset},h=function(){return"undefined"==typeof window?0:window.scrollY||window.pageYOffset};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=d(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));if((0,c.default)())return d(t);var n=t.onChangeScroll.bind(t);return"debounce"===e.delayMethod?t.delayedScroll=(0,u.default)(n,e.delayTime):"throttle"===e.delayMethod&&(t.delayedScroll=(0,s.default)(n,e.delayTime)),t.state={scrollPosition:{x:y(),y:h()}},t.baseComponentRef=i.default.createRef(),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),o(r,[{key:"componentDidMount",value:function(){this.addListeners()}},{key:"componentWillUnmount",value:function(){this.removeListeners()}},{key:"componentDidUpdate",value:function(){"undefined"==typeof window||(0,c.default)()||(0,f.default)(a.default.findDOMNode(this.baseComponentRef.current))!==this.scrollElement&&(this.removeListeners(),this.addListeners())}},{key:"addListeners",value:function(){"undefined"==typeof window||(0,c.default)()||(this.scrollElement=(0,f.default)(a.default.findDOMNode(this.baseComponentRef.current)),this.scrollElement.addEventListener("scroll",this.delayedScroll),window.addEventListener("resize",this.delayedScroll),this.scrollElement!==window&&window.addEventListener("scroll",this.delayedScroll))}},{key:"removeListeners",value:function(){"undefined"==typeof window||(0,c.default)()||(this.scrollElement.removeEventListener("scroll",this.delayedScroll),window.removeEventListener("resize",this.delayedScroll),this.scrollElement!==window&&window.removeEventListener("scroll",this.delayedScroll))}},{key:"onChangeScroll",value:function(){(0,c.default)()||this.setState({scrollPosition:{x:y(),y:h()}})}},{key:"render",value:function(){var t=this.props,r=(t.delayMethod,t.delayTime,function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}(t,["delayMethod","delayTime"])),o=(0,c.default)()?null:this.state.scrollPosition;return i.default.createElement(e,n({ref:this.baseComponentRef,scrollPosition:o},r))}}]),r}();return t.propTypes={delayMethod:l.PropTypes.oneOf(["debounce","throttle"]),delayTime:l.PropTypes.number},t.defaultProps={delayMethod:"throttle",delayTime:300},t}},function(e,t){var r;r=function(){return this}();try{r=r||new Function("return 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 n=a(r(9)),o=a(r(3)),i=a(r(6));function a(e){return e&&e.__esModule?e:{default:e}}t.LazyLoadImage=n.default,t.LazyLoadComponent=o.default,t.trackWindowScroll=i.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),i=u(r(0)),a=r(1),l=u(r(3));function u(e){return e&&e.__esModule?e:{default:e}}var s=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),o(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 n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}(e,["afterLoad","beforeLoad","delayMethod","delayTime","effect","placeholder","placeholderSrc","scrollPosition","threshold","visibleByDefault","wrapperClassName"]));return i.default.createElement("img",n({onLoad:this.onImageLoad()},t))}},{key:"getLazyLoadImage",value:function(e){var t=this.props,r=t.beforeLoad,n=t.className,o=t.delayMethod,a=t.delayTime,u=t.height,s=t.placeholder,c=t.scrollPosition,f=t.style,p=t.threshold,d=t.visibleByDefault,y=t.width;return i.default.createElement(l.default,{beforeLoad:r,className:n,delayMethod:o,delayTime:a,height:u,placeholder:s,scrollPosition:c,style:f,threshold:p,visibleByDefault:d,width:y},e)}},{key:"getWrappedLazyLoadImage",value:function(e){var t=this.props,r=t.effect,n=t.height,o=t.placeholderSrc,a=t.width,l=t.wrapperClassName,u=this.state.loaded,s=u?" lazy-load-image-loaded":"";return i.default.createElement("span",{className:l+" lazy-load-image-background "+r+s,style:{backgroundImage:u?"":"url( "+o+")",backgroundSize:u?"":"100% 100%",color:"transparent",display:"inline-block",height:n,width:a}},e)}},{key:"render",value:function(){var e=this.props,t=e.effect,r=e.placeholderSrc,n=e.visibleByDefault,o=this.state.loaded,i=this.getImg(),a=o?i:this.getLazyLoadImage(i);return!t&&!r||n?a:this.getWrappedLazyLoadImage(a)}}]),t}();s.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},s.defaultProps={afterLoad:function(){return{}},beforeLoad:function(){return{}},delayMethod:"throttle",delayTime:300,effect:"",placeholderSrc:"",threshold:100,visibleByDefault:!1,wrapperClassName:""},t.default=s},function(e,t,r){"use strict";var n=r(11);function o(){}e.exports=function(){function e(e,t,r,o,i,a){if(a!==n){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=o,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,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),o=l(r(0)),i=l(r(4)),a=l(r(6));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,o.default.Component),n(t,[{key:"render",value:function(){return o.default.createElement(i.default,this.props)}}]),t}();t.default=(0,a.default)(u)},function(e,t,r){(function(t){var r="Expected a function",n=NaN,o="[object Symbol]",i=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,u=/^0o[0-7]+$/i,s=parseInt,c="object"==typeof t&&t&&t.Object===Object&&t,f="object"==typeof self&&self&&self.Object===Object&&self,p=c||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)==o}(e))return n;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)?s(e.slice(2),r?2:8):a.test(e)?n:+e}e.exports=function(e,t,n){var o,i,a,l,u,s,c=0,f=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(r);function w(t){var r=o,n=i;return o=i=void 0,c=t,l=e.apply(n,r)}function O(e){var r=e-s;return void 0===s||r>=t||r<0||p&&e-c>=a}function g(){var e=b();if(O(e))return _(e);u=setTimeout(g,function(e){var r=t-(e-s);return p?h(r,a-(e-c)):r}(e))}function _(e){return u=void 0,d&&o?w(e):(o=i=void 0,l)}function P(){var e=b(),r=O(e);if(o=arguments,i=this,s=e,r){if(void 0===u)return function(e){return c=e,u=setTimeout(g,t),f?w(e):l}(s);if(p)return u=setTimeout(g,t),w(s)}return void 0===u&&(u=setTimeout(g,t)),l}return t=m(t)||0,v(n)&&(f=!!n.leading,a=(p="maxWait"in n)?y(m(n.maxWait)||0,t):a,d="trailing"in n?!!n.trailing:d),P.cancel=function(){void 0!==u&&clearTimeout(u),c=0,o=s=i=u=void 0},P.flush=function(){return void 0===u?l:_(b())},P}}).call(this,r(7))},function(e,t,r){(function(t){var r="Expected a function",n=NaN,o="[object Symbol]",i=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,u=/^0o[0-7]+$/i,s=parseInt,c="object"==typeof t&&t&&t.Object===Object&&t,f="object"==typeof self&&self&&self.Object===Object&&self,p=c||f||Function("return this")(),d=Object.prototype.toString,y=Math.max,h=Math.min,b=function(){return p.Date.now()};function v(e,t,n){var o,i,a,l,u,s,c=0,f=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(r);function v(t){var r=o,n=i;return o=i=void 0,c=t,l=e.apply(n,r)}function O(e){var r=e-s;return void 0===s||r>=t||r<0||p&&e-c>=a}function g(){var e=b();if(O(e))return _(e);u=setTimeout(g,function(e){var r=t-(e-s);return p?h(r,a-(e-c)):r}(e))}function _(e){return u=void 0,d&&o?v(e):(o=i=void 0,l)}function P(){var e=b(),r=O(e);if(o=arguments,i=this,s=e,r){if(void 0===u)return function(e){return c=e,u=setTimeout(g,t),f?v(e):l}(s);if(p)return u=setTimeout(g,t),v(s)}return void 0===u&&(u=setTimeout(g,t)),l}return t=w(t)||0,m(n)&&(f=!!n.leading,a=(p="maxWait"in n)?y(w(n.maxWait)||0,t):a,d="trailing"in n?!!n.trailing:d),P.cancel=function(){void 0!==u&&clearTimeout(u),c=0,o=s=i=u=void 0},P.flush=function(){return void 0===u?l:_(b())},P}function m(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function w(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)==o}(e))return n;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)?s(e.slice(2),r?2:8):a.test(e)?n:+e}e.exports=function(e,t,n){var o=!0,i=!0;if("function"!=typeof e)throw new TypeError(r);return m(n)&&(o="leading"in n?!!n.leading:o,i="trailing"in n?!!n.trailing:i),v(e,t,{leading:o,maxWait:t,trailing:i})}}).call(this,r(7))},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e,t){return"undefined"==typeof getComputedStyle?e.style[t]:getComputedStyle(e,null).getPropertyValue(t)},o=function(e){return n(e,"overflow")+n(e,"overflow-y")+n(e,"overflow-x")};t.default=function(e){if(!(e instanceof HTMLElement))return window;for(var t=e;t&&t!==document.body&&t!==document.documentElement&&t.parentNode;){if(/(scroll|auto)/.test(o(t)))return t;t=t.parentNode}return window}}]);
+module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},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 n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},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=8)}([function(e,t){e.exports=require("react")},function(e,t,r){e.exports=r(10)()},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){return"undefined"!=typeof window&&"IntersectionObserver"in window&&"isIntersecting"in window.IntersectionObserverEntry.prototype}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),o=u(r(0)),i=r(1),a=u(r(4)),s=u(r(12)),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)),n=e.afterLoad,o=e.beforeLoad,i=e.scrollPosition,a=e.visibleByDefault;return r.state={visible:a},a&&(o(),n()),r.onVisible=r.onVisible.bind(r),r.isScrollTracked=Boolean(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,o.default.Component),n(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.delayMethod,n=e.delayTime,i=e.height,u=e.placeholder,c=e.scrollPosition,f=e.style,p=e.threshold,d=e.useIntersectionObserver,y=e.width;return this.isScrollTracked||d&&(0,l.default)()?o.default.createElement(a.default,{className:t,height:i,onVisible:this.onVisible,placeholder:u,scrollPosition:c,style:f,threshold:p,useIntersectionObserver:d,width:y}):o.default.createElement(s.default,{className:t,delayMethod:r,delayTime:n,height:i,onVisible:this.onVisible,placeholder:u,style:f,threshold:p,width:y})}}]),t}();c.propTypes={afterLoad:i.PropTypes.func,beforeLoad:i.PropTypes.func,useIntersectionObserver:i.PropTypes.bool,visibleByDefault:i.PropTypes.bool},c.defaultProps={afterLoad:function(){return{}},beforeLoad:function(){return{}},useIntersectionObserver:!0,visibleByDefault:!1},t.default=c},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),i=u(r(0)),a=u(r(5)),s=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)),n=!e.scrollPosition&&e.useIntersectionObserver&&(0,l.default)();if(r.LAZY_LOAD_OBSERVER={supportsObserver:n},n){var o=e.threshold;r.LAZY_LOAD_OBSERVER.observer=new IntersectionObserver(r.checkIntersections,{rootMargin:o+"px"})}return 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),o(t,[{key:"checkIntersections",value:function(e){e.forEach(function(e){e.isIntersecting&&e.target.onVisible()})}},{key:"componentDidMount",value:function(){this.placeholder&&this.LAZY_LOAD_OBSERVER&&this.LAZY_LOAD_OBSERVER.observer&&(this.placeholder.onVisible=this.props.onVisible,this.LAZY_LOAD_OBSERVER.observer.observe(this.placeholder)),this.LAZY_LOAD_OBSERVER&&!this.LAZY_LOAD_OBSERVER.supportsObserver&&this.updateVisibility()}},{key:"componentWillUnMount",value:function(){this.LAZY_LOAD_OBSERVER&&this.LAZY_LOAD_OBSERVER.observer.unobserve(this.placeholder)}},{key:"componentDidUpdate",value:function(){this.LAZY_LOAD_OBSERVER&&!this.LAZY_LOAD_OBSERVER.supportsObserver&&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,n=parseInt(r.getPropertyValue("margin-left"),10)||0,o=parseInt(r.getPropertyValue("margin-top"),10)||0;return{bottom:e.y+t.bottom+o,left:e.x+t.left+n,right:e.x+t.right+n,top:e.y+t.top+o}}},{key:"isPlaceholderInViewport",value:function(){if("undefined"==typeof window||!this.placeholder)return!1;var e=this.props,t=e.scrollPosition,r=e.threshold,n=this.getPlaceholderBoundingBox(t),o=t.y+window.innerHeight,i=t.x,a=t.x+window.innerWidth,s=t.y;return Boolean(s-r<=n.bottom&&o+r>=n.top&&i-r<=n.right&&a+r>=n.left)}},{key:"updateVisibility",value:function(){this.isPlaceholderInViewport()&&this.props.onVisible()}},{key:"render",value:function(){var e=this,t=this.props,r=t.className,o=t.height,a=t.placeholder,s=t.style,l=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:n({display:"inline-block",height:o,width:l},s)},a)}}]),t}();c.propTypes={onVisible:s.PropTypes.func.isRequired,className:s.PropTypes.string,height:s.PropTypes.number,placeholder:s.PropTypes.element,threshold:s.PropTypes.number,useIntersectionObserver:s.PropTypes.bool,scrollPosition:s.PropTypes.shape({x:s.PropTypes.number.isRequired,y:s.PropTypes.number.isRequired}),width:s.PropTypes.number},c.defaultProps={className:"",height:0,placeholder:null,threshold:100,useIntersectionObserver:!0,width:0},t.default=c},function(e,t){e.exports=require("react-dom")},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),i=p(r(0)),a=p(r(5)),s=r(1),l=p(r(13)),u=p(r(14)),c=p(r(2)),f=p(r(15));function p(e){return e&&e.__esModule?e:{default:e}}function d(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}var y=function(){return"undefined"==typeof window?0:window.scrollX||window.pageXOffset},h=function(){return"undefined"==typeof window?0:window.scrollY||window.pageYOffset};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=d(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));if(t.useIntersectionObserver=e.useIntersectionObserver&&(0,c.default)(),t.useIntersectionObserver)return d(t);var n=t.onChangeScroll.bind(t);return"debounce"===e.delayMethod?t.delayedScroll=(0,l.default)(n,e.delayTime):"throttle"===e.delayMethod&&(t.delayedScroll=(0,u.default)(n,e.delayTime)),t.state={scrollPosition:{x:y(),y:h()}},t.baseComponentRef=i.default.createRef(),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),o(r,[{key:"componentDidMount",value:function(){this.addListeners()}},{key:"componentWillUnmount",value:function(){this.removeListeners()}},{key:"componentDidUpdate",value:function(){"undefined"==typeof window||this.useIntersectionObserver||(0,f.default)(a.default.findDOMNode(this.baseComponentRef.current))!==this.scrollElement&&(this.removeListeners(),this.addListeners())}},{key:"addListeners",value:function(){"undefined"==typeof window||this.useIntersectionObserver||(this.scrollElement=(0,f.default)(a.default.findDOMNode(this.baseComponentRef.current)),this.scrollElement.addEventListener("scroll",this.delayedScroll,{passive:!0}),window.addEventListener("resize",this.delayedScroll,{passive:!0}),this.scrollElement!==window&&window.addEventListener("scroll",this.delayedScroll,{passive:!0}))}},{key:"removeListeners",value:function(){"undefined"==typeof window||this.useIntersectionObserver||(this.scrollElement.removeEventListener("scroll",this.delayedScroll),window.removeEventListener("resize",this.delayedScroll),this.scrollElement!==window&&window.removeEventListener("scroll",this.delayedScroll))}},{key:"onChangeScroll",value:function(){this.useIntersectionObserver||this.setState({scrollPosition:{x:y(),y:h()}})}},{key:"render",value:function(){var t=this.props,r=(t.delayMethod,t.delayTime,function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}(t,["delayMethod","delayTime"])),o=this.useIntersectionObserver?null:this.state.scrollPosition;return i.default.createElement(e,n({ref:this.baseComponentRef,scrollPosition:o},r))}}]),r}();return t.propTypes={delayMethod:s.PropTypes.oneOf(["debounce","throttle"]),delayTime:s.PropTypes.number,useIntersectionObserver:s.PropTypes.bool},t.defaultProps={delayMethod:"throttle",delayTime:300,useIntersectionObserver:!0},t}},function(e,t){var r;r=function(){return this}();try{r=r||new Function("return 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 n=a(r(9)),o=a(r(3)),i=a(r(6));function a(e){return e&&e.__esModule?e:{default:e}}t.LazyLoadImage=n.default,t.LazyLoadComponent=o.default,t.trackWindowScroll=i.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),i=l(r(0)),a=r(1),s=l(r(3));function l(e){return e&&e.__esModule?e:{default:e}}var u=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),o(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.useIntersectionObserver,e.visibleByDefault,e.wrapperClassName,function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}(e,["afterLoad","beforeLoad","delayMethod","delayTime","effect","placeholder","placeholderSrc","scrollPosition","threshold","useIntersectionObserver","visibleByDefault","wrapperClassName"]));return i.default.createElement("img",n({onLoad:this.onImageLoad()},t))}},{key:"getLazyLoadImage",value:function(e){var t=this.props,r=t.beforeLoad,n=t.className,o=t.delayMethod,a=t.delayTime,l=t.height,u=t.placeholder,c=t.scrollPosition,f=t.style,p=t.threshold,d=t.useIntersectionObserver,y=t.visibleByDefault,h=t.width;return i.default.createElement(s.default,{beforeLoad:r,className:n,delayMethod:o,delayTime:a,height:l,placeholder:u,scrollPosition:c,style:f,threshold:p,useIntersectionObserver:d,visibleByDefault:y,width:h},e)}},{key:"getWrappedLazyLoadImage",value:function(e){var t=this.props,r=t.effect,n=t.height,o=t.placeholderSrc,a=t.width,s=t.wrapperClassName,l=this.state.loaded,u=l?" lazy-load-image-loaded":"";return i.default.createElement("span",{className:s+" lazy-load-image-background "+r+u,style:{backgroundImage:l?"":"url( "+o+")",backgroundSize:l?"":"100% 100%",color:"transparent",display:"inline-block",height:n,width:a}},e)}},{key:"render",value:function(){var e=this.props,t=e.effect,r=e.placeholderSrc,n=e.visibleByDefault,o=this.state.loaded,i=this.getImg(),a=o?i:this.getLazyLoadImage(i);return!t&&!r||n?a:this.getWrappedLazyLoadImage(a)}}]),t}();u.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,useIntersectionObserver:a.PropTypes.bool,visibleByDefault:a.PropTypes.bool,wrapperClassName:a.PropTypes.string},u.defaultProps={afterLoad:function(){return{}},beforeLoad:function(){return{}},delayMethod:"throttle",delayTime:300,effect:"",placeholderSrc:"",threshold:100,useIntersectionObserver:!0,visibleByDefault:!1,wrapperClassName:""},t.default=u},function(e,t,r){"use strict";var n=r(11);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,r,o,i,a){if(a!==n){var s=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 s.name="Invariant Violation",s}}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,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return 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,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),o=s(r(0)),i=s(r(4)),a=s(r(6));function s(e){return e&&e.__esModule?e:{default:e}}var l=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,o.default.Component),n(t,[{key:"render",value:function(){return o.default.createElement(i.default,this.props)}}]),t}();t.default=(0,a.default)(l)},function(e,t,r){(function(t){var r="Expected a function",n=NaN,o="[object Symbol]",i=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,s=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt,c="object"==typeof t&&t&&t.Object===Object&&t,f="object"==typeof self&&self&&self.Object===Object&&self,p=c||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)==o}(e))return n;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=s.test(e);return r||l.test(e)?u(e.slice(2),r?2:8):a.test(e)?n:+e}e.exports=function(e,t,n){var o,i,a,s,l,u,c=0,f=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(r);function O(t){var r=o,n=i;return o=i=void 0,c=t,s=e.apply(n,r)}function w(e){var r=e-u;return void 0===u||r>=t||r<0||p&&e-c>=a}function g(){var e=b();if(w(e))return _(e);l=setTimeout(g,function(e){var r=t-(e-u);return p?h(r,a-(e-c)):r}(e))}function _(e){return l=void 0,d&&o?O(e):(o=i=void 0,s)}function P(){var e=b(),r=w(e);if(o=arguments,i=this,u=e,r){if(void 0===l)return function(e){return c=e,l=setTimeout(g,t),f?O(e):s}(u);if(p)return l=setTimeout(g,t),O(u)}return void 0===l&&(l=setTimeout(g,t)),s}return t=m(t)||0,v(n)&&(f=!!n.leading,a=(p="maxWait"in n)?y(m(n.maxWait)||0,t):a,d="trailing"in n?!!n.trailing:d),P.cancel=function(){void 0!==l&&clearTimeout(l),c=0,o=u=i=l=void 0},P.flush=function(){return void 0===l?s:_(b())},P}}).call(this,r(7))},function(e,t,r){(function(t){var r="Expected a function",n=NaN,o="[object Symbol]",i=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,s=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt,c="object"==typeof t&&t&&t.Object===Object&&t,f="object"==typeof self&&self&&self.Object===Object&&self,p=c||f||Function("return this")(),d=Object.prototype.toString,y=Math.max,h=Math.min,b=function(){return p.Date.now()};function v(e,t,n){var o,i,a,s,l,u,c=0,f=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(r);function v(t){var r=o,n=i;return o=i=void 0,c=t,s=e.apply(n,r)}function w(e){var r=e-u;return void 0===u||r>=t||r<0||p&&e-c>=a}function g(){var e=b();if(w(e))return _(e);l=setTimeout(g,function(e){var r=t-(e-u);return p?h(r,a-(e-c)):r}(e))}function _(e){return l=void 0,d&&o?v(e):(o=i=void 0,s)}function P(){var e=b(),r=w(e);if(o=arguments,i=this,u=e,r){if(void 0===l)return function(e){return c=e,l=setTimeout(g,t),f?v(e):s}(u);if(p)return l=setTimeout(g,t),v(u)}return void 0===l&&(l=setTimeout(g,t)),s}return t=O(t)||0,m(n)&&(f=!!n.leading,a=(p="maxWait"in n)?y(O(n.maxWait)||0,t):a,d="trailing"in n?!!n.trailing:d),P.cancel=function(){void 0!==l&&clearTimeout(l),c=0,o=u=i=l=void 0},P.flush=function(){return void 0===l?s:_(b())},P}function m(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function O(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)==o}(e))return n;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=s.test(e);return r||l.test(e)?u(e.slice(2),r?2:8):a.test(e)?n:+e}e.exports=function(e,t,n){var o=!0,i=!0;if("function"!=typeof e)throw new TypeError(r);return m(n)&&(o="leading"in n?!!n.leading:o,i="trailing"in n?!!n.trailing:i),v(e,t,{leading:o,maxWait:t,trailing:i})}}).call(this,r(7))},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e,t){return"undefined"==typeof getComputedStyle?e.style[t]:getComputedStyle(e,null).getPropertyValue(t)},o=function(e){return n(e,"overflow")+n(e,"overflow-y")+n(e,"overflow-x")};t.default=function(e){if(!(e instanceof HTMLElement))return window;for(var t=e;t&&t!==document.body&&t!==document.documentElement&&t.parentNode;){if(/(scroll|auto)/.test(o(t)))return t;t=t.parentNode}return window}}]);

package.json

 {
   "name": "react-lazy-load-image-component",
-  "version": "1.3.2",
+  "version": "1.4.0-beta.0",
   "description": " React Component to lazy load images using a HOC to track window scroll position. ",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -10,3 +10,3 @@ <div style="text-align:center;">
 
-"[_An easy-to-use performant solution to lazy load images in React_](https://medium.com/@aljullu/an-easy-to-use-performant-solution-to-lazy-load-images-in-react-e6752071020c)"
+"[_An easy-to-use performant solution to lazy load images in React_](https://blog.albertjuhe.com/2018/03/22/an-easy-to-use-performant-solution-to-lazy-load-images-in-react/)"
 
@@ -77,2 +77,3 @@ [![Build Status](https://travis-ci.org/Aljullu/react-lazy-load-image-component.svg?branch=master)](https://travis-ci.org/Aljullu/react-lazy-load-image-component)
 | threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |
+| useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
 | visibleByDefault | `Boolean` | false | Whether the image must be visible from the beginning. |
@@ -146,2 +147,3 @@ | wrapperClassName | `String` |  | In some occasions (for example, when using a placeholderSrc) a wrapper span tag is rendered. This prop allows setting a class to that element. |
 | threshold | `Number` | 100 | Threshold in pixels. So the component starts loading before it appears in the viewport. |
+| useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
 | visibleByDefault | `Boolean` | false | Whether the component must be visible from the beginning. |
@@ -204,2 +206,3 @@
 | delayTime | `Number` | 300 | Time in ms sent to the delayMethod from lodash. |
+| useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
 
@@ -206,0 +209,0 @@ Notice you can do the same replacing `LazyLoadImage` with `LazyLoadComponent`.

src/components/LazyLoadComponent.jsx

@@ -25,3 +25,3 @@ import React from 'react';
 
-    this.isScrollTracked = (scrollPosition &&
+    this.isScrollTracked = Boolean(scrollPosition &&
       Number.isFinite(scrollPosition.x) && scrollPosition.x >= 0 &&
@@ -49,6 +49,10 @@ Number.isFinite(scrollPosition.y) && scrollPosition.y >= 0);
 
-    const { className, height, placeholder, scrollPosition, style,
-      threshold, width } = this.props;
+    const { className, delayMethod, delayTime, height,
+      placeholder, scrollPosition, style, threshold,
+      useIntersectionObserver, width } = this.props;
 
-    if (this.isScrollTracked || isIntersectionObserverAvailable()) {
+    if (
+      this.isScrollTracked ||
+      (useIntersectionObserver && isIntersectionObserverAvailable())
+    ) {
       return (
@@ -63,2 +67,3 @@ <PlaceholderWithoutTracking
           threshold={threshold}
+          useIntersectionObserver={useIntersectionObserver}
           width={width} />
@@ -71,2 +76,4 @@ );
         className={className}
+        delayMethod={delayMethod}
+        delayTime={delayTime}
         height={height}
@@ -85,2 +92,3 @@ onVisible={this.onVisible}
   beforeLoad: PropTypes.func,
+  useIntersectionObserver: PropTypes.bool,
   visibleByDefault: PropTypes.bool,
@@ -92,2 +100,3 @@ };
   beforeLoad: () => ({}),
+  useIntersectionObserver: true,
   visibleByDefault: false,
@@ -94,0 +103,0 @@ };

src/components/LazyLoadComponent.spec.js

@@ -32,6 +32,5 @@ /* eslint max-len: 0 */
 
-  it('renders a PlaceholderWithTracking when scrollPosition is undefined', function() {
+  it('renders children when visible', function() {
     const lazyLoadComponent = mount(
-      <LazyLoadComponent
-        style={{ marginTop: 100000 }}>
+      <LazyLoadComponent>
         <p>Lorem Ipsum</p>
@@ -41,110 +40,155 @@ </LazyLoadComponent>
 
-    const placeholderWithTracking = scryRenderedComponentsWithType(
-      lazyLoadComponent.instance(), PlaceholderWithTracking);
+    lazyLoadComponent.instance().onVisible();
 
-    expect(placeholderWithTracking.length).toEqual(1);
+    const paragraphs = scryRenderedDOMComponentsWithTag(
+      lazyLoadComponent.instance(), 'p');
+
+    expect(paragraphs.length).toEqual(1);
   });
 
-  it('renders a PlaceholderWithoutTracking when scrollPosition is undefined but IntersectionObserver is available', function() {
-    isIntersectionObserverAvailable.mockImplementation(() => true);
-    window.IntersectionObserver = jest.fn(function() {
-      this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this
+  describe('placeholders', function() {
+    it('renders a PlaceholderWithTracking when scrollPosition is undefined', function() {
+      const lazyLoadComponent = mount(
+        <LazyLoadComponent
+          style={{ marginTop: 100000 }}
+        >
+          <p>Lorem Ipsum</p>
+        </LazyLoadComponent>
+      );
+
+      const placeholderWithTracking = scryRenderedComponentsWithType(
+        lazyLoadComponent.instance(),
+        PlaceholderWithTracking
+      );
+
+      expect(placeholderWithTracking.length).toEqual(1);
     });
 
-    const lazyLoadComponent = mount(
-      <LazyLoadComponent
-        style={{ marginTop: 100000 }}>
-        <p>Lorem Ipsum</p>
-      </LazyLoadComponent>
-    );
+    it('renders a PlaceholderWithTracking when when IntersectionObserver is available but useIntersectionObserver is set to false', function() {
+      isIntersectionObserverAvailable.mockImplementation(() => true);
+      window.IntersectionObserver = jest.fn(function() {
+        this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this
+      });
 
-    const placeholderWithTracking = scryRenderedComponentsWithType(
-      lazyLoadComponent.instance(), PlaceholderWithTracking);
-    const placeholderWithoutTracking = scryRenderedComponentsWithType(
-      lazyLoadComponent.instance(), PlaceholderWithoutTracking);
+      const lazyLoadComponent = mount(
+        <LazyLoadComponent
+          useIntersectionObserver={false}
+          style={{ marginTop: 100000 }}
+        >
+          <p>Lorem Ipsum</p>
+        </LazyLoadComponent>
+      );
 
-    expect(placeholderWithTracking.length).toEqual(0);
-    expect(placeholderWithoutTracking.length).toEqual(1);
-  });
+      const placeholderWithTracking = scryRenderedComponentsWithType(
+        lazyLoadComponent.instance(),
+        PlaceholderWithTracking
+      );
+      const placeholderWithoutTracking = scryRenderedComponentsWithType(
+        lazyLoadComponent.instance(),
+        PlaceholderWithoutTracking
+      );
 
-  it('renders a PlaceholderWithoutTracking when scrollPosition is defined', function() {
-    const lazyLoadComponent = mount(
-      <LazyLoadComponent
-        scrollPosition={{ x: 0, y: 0 }}
-        style={{ marginTop: 100000 }}>
-        <p>Lorem Ipsum</p>
-      </LazyLoadComponent>
-    );
+      expect(placeholderWithTracking.length).toEqual(1);
+    });
 
-    const placeholderWithTracking = scryRenderedComponentsWithType(
-      lazyLoadComponent.instance(), PlaceholderWithTracking);
-    const placeholderWithoutTracking = scryRenderedComponentsWithType(
-      lazyLoadComponent.instance(), PlaceholderWithoutTracking);
+    it('renders a PlaceholderWithoutTracking when scrollPosition is undefined but IntersectionObserver is available', function() {
+      isIntersectionObserverAvailable.mockImplementation(() => true);
+      window.IntersectionObserver = jest.fn(function() {
+        this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this
+      });
 
-    expect(placeholderWithTracking.length).toEqual(0);
-    expect(placeholderWithoutTracking.length).toEqual(1);
-  });
+      const lazyLoadComponent = mount(
+        <LazyLoadComponent
+          style={{ marginTop: 100000 }}
+        >
+          <p>Lorem Ipsum</p>
+        </LazyLoadComponent>
+      );
 
-  it('renders children when visible', function() {
-    const lazyLoadComponent = mount(
-      <LazyLoadComponent>
-        <p>Lorem Ipsum</p>
-      </LazyLoadComponent>
-    );
+      const placeholderWithTracking = scryRenderedComponentsWithType(
+        lazyLoadComponent.instance(),
+        PlaceholderWithTracking
+      );
+      const placeholderWithoutTracking = scryRenderedComponentsWithType(
+        lazyLoadComponent.instance(),
+        PlaceholderWithoutTracking
+      );
 
-    lazyLoadComponent.instance().onVisible();
+      expect(placeholderWithTracking.length).toEqual(0);
+      expect(placeholderWithoutTracking.length).toEqual(1);
+    });
 
-    const paragraphs = scryRenderedDOMComponentsWithTag(
-      lazyLoadComponent.instance(), 'p');
+    it('renders a PlaceholderWithoutTracking when scrollPosition is defined', function() {
+      const lazyLoadComponent = mount(
+        <LazyLoadComponent
+          scrollPosition={{ x: 0, y: 0 }}
+          style={{ marginTop: 100000 }}
+        >
+          <p>Lorem Ipsum</p>
+        </LazyLoadComponent>
+      );
 
-    expect(paragraphs.length).toEqual(1);
+      const placeholderWithTracking = scryRenderedComponentsWithType(
+        lazyLoadComponent.instance(),
+        PlaceholderWithTracking
+      );
+      const placeholderWithoutTracking = scryRenderedComponentsWithType(
+        lazyLoadComponent.instance(),
+        PlaceholderWithoutTracking
+      );
+
+      expect(placeholderWithTracking.length).toEqual(0);
+      expect(placeholderWithoutTracking.length).toEqual(1);
+    });
   });
 
-  it('triggers beforeLoad when onVisible is triggered', function() {
-    const beforeLoad = jest.fn();
-    const lazyLoadComponent = mount(
-      <LazyLoadComponent
-        beforeLoad={beforeLoad}
-        style={{ marginTop: 100000 }}>
-        <p>Lorem Ipsum</p>
-      </LazyLoadComponent>
-    );
+  describe('beforeLoad/afterLoad', function() {
+    it('triggers beforeLoad when onVisible is triggered', function() {
+      const beforeLoad = jest.fn();
+      const lazyLoadComponent = mount(
+        <LazyLoadComponent
+          beforeLoad={beforeLoad}
+          style={{ marginTop: 100000 }}>
+          <p>Lorem Ipsum</p>
+        </LazyLoadComponent>
+      );
 
-    lazyLoadComponent.instance().onVisible();
+      lazyLoadComponent.instance().onVisible();
 
-    expect(beforeLoad).toHaveBeenCalledTimes(1);
-  });
+      expect(beforeLoad).toHaveBeenCalledTimes(1);
+    });
 
-  it('triggers afterLoad when onVisible is triggered', function() {
-    const afterLoad = jest.fn();
-    const lazyLoadComponent = mount(
-      <LazyLoadComponent
-        afterLoad={afterLoad}
-        style={{ marginTop: 100000 }}>
-        <p>Lorem Ipsum</p>
-      </LazyLoadComponent>
-    );
+    it('triggers afterLoad when onVisible is triggered', function() {
+      const afterLoad = jest.fn();
+      const lazyLoadComponent = mount(
+        <LazyLoadComponent
+          afterLoad={afterLoad}
+          style={{ marginTop: 100000 }}>
+          <p>Lorem Ipsum</p>
+        </LazyLoadComponent>
+      );
 
-    lazyLoadComponent.instance().onVisible();
+      lazyLoadComponent.instance().onVisible();
 
-    expect(afterLoad).toHaveBeenCalledTimes(1);
-  });
+      expect(afterLoad).toHaveBeenCalledTimes(1);
+    });
 
-  it('triggers beforeLoad and afterLoad when visibleByDefault is true', function() {
-    const afterLoad = jest.fn();
-    const beforeLoad = jest.fn();
-    const lazyLoadComponent = mount(
-      <LazyLoadComponent
-        afterLoad={afterLoad}
-        beforeLoad={beforeLoad}
-        style={{ marginTop: 100000 }}>
-        <p>Lorem Ipsum</p>
-      </LazyLoadComponent>
-    );
+    it('triggers beforeLoad and afterLoad when visibleByDefault is true', function() {
+      const afterLoad = jest.fn();
+      const beforeLoad = jest.fn();
+      const lazyLoadComponent = mount(
+        <LazyLoadComponent
+          afterLoad={afterLoad}
+          beforeLoad={beforeLoad}
+          style={{ marginTop: 100000 }}>
+          <p>Lorem Ipsum</p>
+        </LazyLoadComponent>
+      );
 
-    lazyLoadComponent.instance().onVisible();
+      lazyLoadComponent.instance().onVisible();
 
-    expect(afterLoad).toHaveBeenCalledTimes(1);
-    expect(beforeLoad).toHaveBeenCalledTimes(1);
+      expect(afterLoad).toHaveBeenCalledTimes(1);
+      expect(beforeLoad).toHaveBeenCalledTimes(1);
+    });
   });
 });

src/components/LazyLoadImage.jsx

@@ -32,3 +32,4 @@ import React from 'react';
       placeholder, placeholderSrc, scrollPosition, threshold,
-      visibleByDefault, wrapperClassName, ...imgProps } = this.props;
+      useIntersectionObserver, visibleByDefault, wrapperClassName,
+      ...imgProps } = this.props;
 
@@ -41,3 +42,3 @@ return <img onLoad={this.onImageLoad()} {...imgProps} />;
       height, placeholder, scrollPosition, style, threshold,
-      visibleByDefault, width } = this.props;
+      useIntersectionObserver, visibleByDefault, width } = this.props;
 
@@ -55,2 +56,3 @@ return (
         threshold={threshold}
+        useIntersectionObserver={useIntersectionObserver}
         visibleByDefault={visibleByDefault}
@@ -113,2 +115,3 @@ width={width}>
   threshold: PropTypes.number,
+  useIntersectionObserver: PropTypes.bool,
   visibleByDefault: PropTypes.bool,
@@ -126,2 +129,3 @@ wrapperClassName: PropTypes.string,
   threshold: 100,
+  useIntersectionObserver: true,
   visibleByDefault: false,
@@ -128,0 +132,0 @@ wrapperClassName: '',

src/components/PlaceholderWithoutTracking.jsx

@@ -10,3 +10,4 @@ import React from 'react';
 
-    const supportsObserver = isIntersectionObserverAvailable();
+    const supportsObserver = !props.scrollPosition &&
+      props.useIntersectionObserver && isIntersectionObserverAvailable();
 
@@ -124,2 +125,3 @@ this.LAZY_LOAD_OBSERVER = { supportsObserver };
   threshold: PropTypes.number,
+  useIntersectionObserver: PropTypes.bool,
   scrollPosition: PropTypes.shape({
@@ -137,2 +139,3 @@ x: PropTypes.number.isRequired,
   threshold: 100,
+  useIntersectionObserver: true,
   width: 0,
@@ -139,0 +142,0 @@ };

src/components/PlaceholderWithoutTracking.spec.js

@@ -193,2 +193,3 @@ /* eslint require-jsdoc: 0 */
       onVisible,
+      scrollPosition: null,
     });
@@ -198,2 +199,17 @@
   });
+
+  it('tracks placeholder visibility when IntersectionObserver is available but scrollPosition is set', function() {
+    isIntersectionObserverAvailable.mockImplementation(() => true);
+    window.IntersectionObserver = jest.fn(function() {
+      this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this
+    });
+    const offset = 100000;
+    const onVisible = jest.fn();
+    const component = renderPlaceholderWithoutTracking({
+      onVisible,
+      style: { marginLeft: offset },
+    });
+
+    expect(onVisible).toHaveBeenCalledTimes(0);
+  });
 });

src/hoc/trackWindowScroll.js

@@ -19,3 +19,5 @@ import React from 'react';
 
-      if (isIntersectionObserverAvailable()) {
+      this.useIntersectionObserver =
+        props.useIntersectionObserver && isIntersectionObserverAvailable();
+      if (this.useIntersectionObserver) {
         return;
@@ -51,3 +53,3 @@ }
     componentDidUpdate() {
-      if (typeof window === 'undefined' || isIntersectionObserverAvailable()) {
+      if (typeof window === 'undefined' || this.useIntersectionObserver) {
         return;
@@ -67,3 +69,3 @@ }
     addListeners() {
-      if (typeof window === 'undefined' || isIntersectionObserverAvailable()) {
+      if (typeof window === 'undefined' || this.useIntersectionObserver) {
         return;
@@ -76,7 +78,19 @@ }
 
-      this.scrollElement.addEventListener('scroll', this.delayedScroll);
-      window.addEventListener('resize', this.delayedScroll);
+      this.scrollElement.addEventListener(
+        'scroll',
+        this.delayedScroll,
+        { passive: true }
+      );
+      window.addEventListener(
+        'resize',
+        this.delayedScroll,
+        { passive: true }
+      );
 
       if (this.scrollElement !== window) {
-        window.addEventListener('scroll', this.delayedScroll);
+        window.addEventListener(
+          'scroll',
+          this.delayedScroll,
+          { passive: true }
+        );
       }
@@ -86,3 +100,3 @@ }
     removeListeners() {
-      if (typeof window == 'undefined' || isIntersectionObserverAvailable()) {
+      if (typeof window == 'undefined' || this.useIntersectionObserver) {
         return;
@@ -100,3 +114,3 @@ }
     onChangeScroll() {
-      if (isIntersectionObserverAvailable()) {
+      if (this.useIntersectionObserver) {
         return;
@@ -115,3 +129,3 @@ }
       const { delayMethod, delayTime, ...props } = this.props;
-      const scrollPosition = isIntersectionObserverAvailable() ?
+      const scrollPosition = this.useIntersectionObserver ?
         null : this.state.scrollPosition;
@@ -131,2 +145,3 @@
     delayTime: PropTypes.number,
+    useIntersectionObserver: PropTypes.bool,
   };
@@ -137,2 +152,3 @@
     delayTime: 300,
+    useIntersectionObserver: true,
   };
@@ -139,0 +155,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76396

increased by5.54%

Lines of code

1029

increased by9.12%

Number of lines in readme file

256

increased by1.19%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes