react-lazy-load-image-component 1.4.1 → 1.5.0

package/README.md

@@ -77,6 +77,7 @@ export default MyImage;
 | useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
 | visibleByDefault | `Boolean` | false | Whether the image must be visible from the beginning. |
 | 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. |
+| wrapperProps | `Object` | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) |
 | ... |  |  | Any other image attribute |
 
 
@@ -146,7 +147,6 @@ export default Article;
 | useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
 | visibleByDefault | `Boolean` | false | Whether the component must be visible from the beginning. |
 
-
 ## Using `trackWindowScroll` HOC to improve performance
 
 When you have many elements to lazy load in the same page, you might get poor performance because each one is listening to the scroll/resize events. In that case, it's better to wrap the deepest common parent of those components with a HOC to track those events (`trackWindowScroll`).
@@ -193,6 +193,7 @@ You must set the prop `scrollPosition` to the lazy load components. This way, th
 | placeholder | `ReactClass` | `<span>` | React element to use as a placeholder. |
 | threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |
 | visibleByDefault | `Boolean` | false | Whether the image must be visible from the beginning. |
+| wrapperProps | `Object` | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) |
 | ... |  |  | Any other image attribute |
 
 Component wrapped with `trackWindowScroll` (in the example, `Gallery`)

package/build/index.js

@@ -98,8 +98,8 @@ module.exports = (function(e) {
 			o = u(r(0)),
 			i = r(1),
 			a = u(r(4)),
-			l = u(r(12)),
-			s = u(r(2));
+			s = u(r(12)),
+			l = u(r(2));
 		function u(e) {
 			return e && e.__esModule ? e : { default: e };
 		}
@@ -193,7 +193,7 @@ module.exports = (function(e) {
 								d = e.useIntersectionObserver,
 								y = e.width;
 							return this.isScrollTracked ||
-								(d && (0, s.default)())
+								(d && (0, l.default)())
 								? o.default.createElement(a.default, {
 										className: t,
 										height: i,
@@ -205,7 +205,7 @@ module.exports = (function(e) {
 										useIntersectionObserver: d,
 										width: y,
 								  })
-								: o.default.createElement(l.default, {
+								: o.default.createElement(s.default, {
 										className: t,
 										delayMethod: r,
 										delayTime: n,
@@ -270,20 +270,34 @@ module.exports = (function(e) {
 			})(),
 			i = u(r(0)),
 			a = u(r(5)),
-			l = r(1),
-			s = u(r(2));
+			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) {
+		var c = function(e) {
+				e.forEach(function(e) {
+					e.isIntersecting && e.target.onVisible();
+				});
+			},
+			f = {},
+			p = function(e) {
+				return (
+					(f[e] =
+						f[e] ||
+						new IntersectionObserver(c, { rootMargin: e + 'px' })),
+					f[e]
+				);
+			},
+			d = (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"
@@ -295,205 +309,195 @@ module.exports = (function(e) {
 					})(
 						this,
 						(t.__proto__ || Object.getPrototypeOf(t)).call(this, e)
-					),
-					n =
-						!e.scrollPosition &&
-						e.useIntersectionObserver &&
-						(0, s.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' }
 					);
+					if (
+						((r.supportsObserver =
+							!e.scrollPosition &&
+							e.useIntersectionObserver &&
+							(0, l.default)()),
+						r.supportsObserver)
+					) {
+						var n = e.threshold;
+						r.observer = p(n);
+					}
+					return r;
 				}
-				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,
+				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, e),
+					o(t, [
+						{
+							key: 'componentDidMount',
+							value: function() {
+								this.placeholder &&
+									this.observer &&
+									((this.placeholder.onVisible = this.props.onVisible),
+									this.observer.observe(this.placeholder)),
+									this.supportsObserver ||
+										this.updateVisibility();
+							},
 						},
-					})),
-						t &&
-							(Object.setPrototypeOf
-								? Object.setPrototypeOf(e, t)
-								: (e.__proto__ = t));
-				})(t, e),
-				o(t, [
-					{
-						key: 'checkIntersections',
-						value: function(e) {
-							e.forEach(function(e) {
-								e.isIntersecting && e.target.onVisible();
-							});
+						{
+							key: 'componentWillUnmount',
+							value: function() {
+								this.observer &&
+									this.observer.unobserve(this.placeholder);
+							},
 						},
-					},
-					{
-						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 &&
+						{
+							key: 'componentDidUpdate',
+							value: function() {
+								this.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 = {
-									left:
-										parseInt(
-											r.getPropertyValue('margin-left'),
-											10
-										) || 0,
-									top:
-										parseInt(
-											r.getPropertyValue('margin-top'),
-											10
-										) || 0,
+						{
+							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 = {
+										left:
+											parseInt(
+												r.getPropertyValue(
+													'margin-left'
+												),
+												10
+											) || 0,
+										top:
+											parseInt(
+												r.getPropertyValue(
+													'margin-top'
+												),
+												10
+											) || 0,
+									};
+								return {
+									bottom: e.y + t.bottom + n.top,
+									left: e.x + t.left + n.left,
+									right: e.x + t.right + n.left,
+									top: e.y + t.top + n.top,
 								};
-							return {
-								bottom: e.y + t.bottom + n.top,
-								left: e.x + t.left + n.left,
-								right: e.x + t.right + n.left,
-								top: e.y + t.top + n.top,
-							};
+							},
 						},
-					},
-					{
-						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: '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: '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,
-								s = t.width;
-							return a && 'function' != typeof a.type
-								? i.default.cloneElement(a, {
+						{
+							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;
+								if (a && 'function' != typeof a.type)
+									return i.default.cloneElement(a, {
 										ref: function(t) {
 											return (e.placeholder = t);
 										},
-								  })
-								: i.default.createElement(
+									});
+								var u = n({ display: 'inline-block' }, s);
+								return (
+									void 0 !== l && (u.width = l),
+									void 0 !== o && (u.height = o),
+									i.default.createElement(
 										'span',
 										{
 											className: r,
 											ref: function(t) {
 												return (e.placeholder = t);
 											},
-											style: n(
-												{
-													display: 'inline-block',
-													height: o,
-													width: s,
-												},
-												l
-											),
+											style: u,
 										},
 										a
-								  );
+									)
+								);
+							},
 						},
-					},
-				]),
-				t
-			);
-		})(i.default.Component);
-		(c.propTypes = {
-			onVisible: l.PropTypes.func.isRequired,
-			className: l.PropTypes.string,
-			height: l.PropTypes.number,
-			placeholder: l.PropTypes.element,
-			threshold: l.PropTypes.number,
-			useIntersectionObserver: l.PropTypes.bool,
-			scrollPosition: l.PropTypes.shape({
-				x: l.PropTypes.number.isRequired,
-				y: l.PropTypes.number.isRequired,
+					]),
+					t
+				);
+			})(i.default.Component);
+		(d.propTypes = {
+			onVisible: s.PropTypes.func.isRequired,
+			className: s.PropTypes.string,
+			height: s.PropTypes.oneOfType([
+				s.PropTypes.number,
+				s.PropTypes.string,
+			]),
+			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: l.PropTypes.number,
+			width: s.PropTypes.oneOfType([
+				s.PropTypes.number,
+				s.PropTypes.string,
+			]),
 		}),
-			(c.defaultProps = {
+			(d.defaultProps = {
 				className: '',
-				height: 0,
 				placeholder: null,
 				threshold: 100,
 				useIntersectionObserver: !0,
-				width: 0,
 			}),
-			(t.default = c);
+			(t.default = d);
 	},
 	function(e, t) {
 		e.exports = require('react-dom');
@@ -528,8 +532,8 @@ module.exports = (function(e) {
 			})(),
 			i = p(r(0)),
 			a = p(r(5)),
-			l = r(1),
-			s = p(r(13)),
+			s = r(1),
+			l = p(r(13)),
 			u = p(r(14)),
 			c = p(r(2)),
 			f = p(r(15));
@@ -577,7 +581,7 @@ module.exports = (function(e) {
 					var n = t.onChangeScroll.bind(t);
 					return (
 						'debounce' === e.delayMethod
-							? (t.delayedScroll = (0, s.default)(n, e.delayTime))
+							? (t.delayedScroll = (0, l.default)(n, e.delayTime))
 							: 'throttle' === e.delayMethod &&
 							  (t.delayedScroll = (0, u.default)(
 									n,
@@ -731,9 +735,9 @@ module.exports = (function(e) {
 			})(i.default.Component);
 			return (
 				(t.propTypes = {
-					delayMethod: l.PropTypes.oneOf(['debounce', 'throttle']),
-					delayTime: l.PropTypes.number,
-					useIntersectionObserver: l.PropTypes.bool,
+					delayMethod: s.PropTypes.oneOf(['debounce', 'throttle']),
+					delayTime: s.PropTypes.number,
+					useIntersectionObserver: s.PropTypes.bool,
 				}),
 				(t.defaultProps = {
 					delayMethod: 'throttle',
@@ -798,10 +802,10 @@ module.exports = (function(e) {
 					return r && e(t.prototype, r), n && e(t, n), t;
 				};
 			})(),
-			i = s(r(0)),
+			i = l(r(0)),
 			a = r(1),
-			l = s(r(3));
-		function s(e) {
+			s = l(r(3));
+		function l(e) {
 			return e && e.__esModule ? e : { default: e };
 		}
 		var u = (function(e) {
@@ -877,6 +881,7 @@ module.exports = (function(e) {
 									e.useIntersectionObserver,
 									e.visibleByDefault,
 									e.wrapperClassName,
+									e.wrapperProps,
 									(function(e, t) {
 										var r = {};
 										for (var n in e)
@@ -900,6 +905,7 @@ module.exports = (function(e) {
 										'useIntersectionObserver',
 										'visibleByDefault',
 										'wrapperClassName',
+										'wrapperProps',
 									]));
 							return i.default.createElement(
 								'img',
@@ -916,7 +922,7 @@ module.exports = (function(e) {
 								n = e.delayMethod,
 								o = e.delayTime,
 								a = e.height,
-								s = e.placeholder,
+								l = e.placeholder,
 								u = e.scrollPosition,
 								c = e.style,
 								f = e.threshold,
@@ -924,14 +930,14 @@ module.exports = (function(e) {
 								d = e.visibleByDefault,
 								y = e.width;
 							return i.default.createElement(
-								l.default,
+								s.default,
 								{
 									beforeLoad: t,
 									className: r,
 									delayMethod: n,
 									delayTime: o,
 									height: a,
-									placeholder: s,
+									placeholder: l,
 									scrollPosition: u,
 									style: c,
 									threshold: f,
@@ -948,31 +954,35 @@ module.exports = (function(e) {
 						value: function(e) {
 							var t = this.props,
 								r = t.effect,
-								n = t.height,
-								o = t.placeholderSrc,
-								a = t.width,
+								o = t.height,
+								a = t.placeholderSrc,
+								s = t.width,
 								l = t.wrapperClassName,
-								s = this.state.loaded,
-								u = s ? ' lazy-load-image-loaded' : '';
+								u = t.wrapperProps,
+								c = this.state.loaded,
+								f = c ? ' lazy-load-image-loaded' : '';
 							return i.default.createElement(
 								'span',
-								{
-									className:
-										l +
-										' lazy-load-image-background ' +
-										r +
-										u,
-									style: {
-										backgroundImage:
-											s || !o ? '' : 'url(' + o + ')',
-										backgroundSize:
-											s || !o ? '' : '100% 100%',
-										color: 'transparent',
-										display: 'inline-block',
-										height: n,
-										width: a,
+								n(
+									{
+										className:
+											l +
+											' lazy-load-image-background ' +
+											r +
+											f,
+										style: {
+											backgroundImage:
+												c || !a ? '' : 'url(' + a + ')',
+											backgroundSize:
+												c || !a ? '' : '100% 100%',
+											color: 'transparent',
+											display: 'inline-block',
+											height: o,
+											width: s,
+										},
 									},
-								},
+									u
+								),
 								e
 							);
 						},
@@ -984,10 +994,12 @@ module.exports = (function(e) {
 								t = e.effect,
 								r = e.placeholderSrc,
 								n = e.visibleByDefault,
-								o = this.getLazyLoadImage();
-							return (!t && !r) || n
-								? o
-								: this.getWrappedLazyLoadImage(o);
+								o = e.wrapperClassName,
+								i = e.wrapperProps,
+								a = this.getLazyLoadImage();
+							return ((t || r) && !n) || o || i
+								? this.getWrappedLazyLoadImage(a)
+								: a;
 						},
 					},
 				]),
@@ -1005,6 +1017,7 @@ module.exports = (function(e) {
 			useIntersectionObserver: a.PropTypes.bool,
 			visibleByDefault: a.PropTypes.bool,
 			wrapperClassName: a.PropTypes.string,
+			wrapperProps: a.PropTypes.object,
 		}),
 			(u.defaultProps = {
 				afterLoad: function() {
@@ -1033,10 +1046,10 @@ module.exports = (function(e) {
 			(e.exports = function() {
 				function e(e, t, r, o, i, a) {
 					if (a !== n) {
-						var l = new Error(
+						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 ((l.name = 'Invariant Violation'), l);
+						throw ((s.name = 'Invariant Violation'), s);
 					}
 				}
 				function t() {
@@ -1089,13 +1102,13 @@ module.exports = (function(e) {
 					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) {
+			o = s(r(0)),
+			i = s(r(4)),
+			a = s(r(6));
+		function s(e) {
 			return e && e.__esModule ? e : { default: e };
 		}
-		var s = (function(e) {
+		var l = (function(e) {
 			function t(e) {
 				return (
 					(function(e, t) {
@@ -1153,7 +1166,7 @@ module.exports = (function(e) {
 				t
 			);
 		})(o.default.Component);
-		t.default = (0, a.default)(s);
+		t.default = (0, a.default)(l);
 	},
 	function(e, t, r) {
 		(function(t) {
@@ -1162,8 +1175,8 @@ module.exports = (function(e) {
 				o = '[object Symbol]',
 				i = /^\s+|\s+$/g,
 				a = /^[-+]0x[0-9a-f]+$/i,
-				l = /^0b[01]+$/i,
-				s = /^0o[0-7]+$/i,
+				s = /^0b[01]+$/i,
+				l = /^0o[0-7]+$/i,
 				u = parseInt,
 				c = 'object' == typeof t && t && t.Object === Object && t,
 				f =
@@ -1202,8 +1215,8 @@ module.exports = (function(e) {
 				}
 				if ('string' != typeof e) return 0 === e ? e : +e;
 				e = e.replace(i, '');
-				var r = l.test(e);
-				return r || s.test(e)
+				var r = s.test(e);
+				return r || l.test(e)
 					? u(e.slice(2), r ? 2 : 8)
 					: a.test(e)
 					? n
@@ -1213,27 +1226,27 @@ module.exports = (function(e) {
 				var o,
 					i,
 					a,
-					l,
 					s,
+					l,
 					u,
 					c = 0,
 					f = !1,
 					p = !1,
 					d = !0;
 				if ('function' != typeof e) throw new TypeError(r);
-				function O(t) {
+				function w(t) {
 					var r = o,
 						n = i;
-					return (o = i = void 0), (c = t), (l = e.apply(n, r));
+					return (o = i = void 0), (c = t), (s = e.apply(n, r));
 				}
-				function w(e) {
+				function O(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);
-					s = setTimeout(
+					if (O(e)) return P(e);
+					l = setTimeout(
 						g,
 						(function(e) {
 							var r = t - (e - u);
@@ -1241,24 +1254,24 @@ module.exports = (function(e) {
 						})(e)
 					);
 				}
-				function _(e) {
-					return (s = void 0), d && o ? O(e) : ((o = i = void 0), l);
+				function P(e) {
+					return (l = void 0), d && o ? w(e) : ((o = i = void 0), s);
 				}
-				function P() {
+				function T() {
 					var e = b(),
-						r = w(e);
+						r = O(e);
 					if (((o = arguments), (i = this), (u = e), r)) {
-						if (void 0 === s)
+						if (void 0 === l)
 							return (function(e) {
 								return (
 									(c = e),
-									(s = setTimeout(g, t)),
-									f ? O(e) : l
+									(l = setTimeout(g, t)),
+									f ? w(e) : s
 								);
 							})(u);
-						if (p) return (s = setTimeout(g, t)), O(u);
+						if (p) return (l = setTimeout(g, t)), w(u);
 					}
-					return void 0 === s && (s = setTimeout(g, t)), l;
+					return void 0 === l && (l = setTimeout(g, t)), s;
 				}
 				return (
 					(t = m(t) || 0),
@@ -1268,15 +1281,15 @@ module.exports = (function(e) {
 							? y(m(n.maxWait) || 0, t)
 							: a),
 						(d = 'trailing' in n ? !!n.trailing : d)),
-					(P.cancel = function() {
-						void 0 !== s && clearTimeout(s),
+					(T.cancel = function() {
+						void 0 !== l && clearTimeout(l),
 							(c = 0),
-							(o = u = i = s = void 0);
+							(o = u = i = l = void 0);
 					}),
-					(P.flush = function() {
-						return void 0 === s ? l : _(b());
+					(T.flush = function() {
+						return void 0 === l ? s : P(b());
 					}),
-					P
+					T
 				);
 			};
 		}.call(this, r(7)));
@@ -1288,8 +1301,8 @@ module.exports = (function(e) {
 				o = '[object Symbol]',
 				i = /^\s+|\s+$/g,
 				a = /^[-+]0x[0-9a-f]+$/i,
-				l = /^0b[01]+$/i,
-				s = /^0o[0-7]+$/i,
+				s = /^0b[01]+$/i,
+				l = /^0o[0-7]+$/i,
 				u = parseInt,
 				c = 'object' == typeof t && t && t.Object === Object && t,
 				f =
@@ -1308,8 +1321,8 @@ module.exports = (function(e) {
 				var o,
 					i,
 					a,
-					l,
 					s,
+					l,
 					u,
 					c = 0,
 					f = !1,
@@ -1319,16 +1332,16 @@ module.exports = (function(e) {
 				function v(t) {
 					var r = o,
 						n = i;
-					return (o = i = void 0), (c = t), (l = e.apply(n, r));
+					return (o = i = void 0), (c = t), (s = e.apply(n, r));
 				}
-				function w(e) {
+				function O(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);
-					s = setTimeout(
+					if (O(e)) return P(e);
+					l = setTimeout(
 						g,
 						(function(e) {
 							var r = t - (e - u);
@@ -1336,49 +1349,49 @@ module.exports = (function(e) {
 						})(e)
 					);
 				}
-				function _(e) {
-					return (s = void 0), d && o ? v(e) : ((o = i = void 0), l);
+				function P(e) {
+					return (l = void 0), d && o ? v(e) : ((o = i = void 0), s);
 				}
-				function P() {
+				function T() {
 					var e = b(),
-						r = w(e);
+						r = O(e);
 					if (((o = arguments), (i = this), (u = e), r)) {
-						if (void 0 === s)
+						if (void 0 === l)
 							return (function(e) {
 								return (
 									(c = e),
-									(s = setTimeout(g, t)),
-									f ? v(e) : l
+									(l = setTimeout(g, t)),
+									f ? v(e) : s
 								);
 							})(u);
-						if (p) return (s = setTimeout(g, t)), v(u);
+						if (p) return (l = setTimeout(g, t)), v(u);
 					}
-					return void 0 === s && (s = setTimeout(g, t)), l;
+					return void 0 === l && (l = setTimeout(g, t)), s;
 				}
 				return (
-					(t = O(t) || 0),
+					(t = w(t) || 0),
 					m(n) &&
 						((f = !!n.leading),
 						(a = (p = 'maxWait' in n)
-							? y(O(n.maxWait) || 0, t)
+							? y(w(n.maxWait) || 0, t)
 							: a),
 						(d = 'trailing' in n ? !!n.trailing : d)),
-					(P.cancel = function() {
-						void 0 !== s && clearTimeout(s),
+					(T.cancel = function() {
+						void 0 !== l && clearTimeout(l),
 							(c = 0),
-							(o = u = i = s = void 0);
+							(o = u = i = l = void 0);
 					}),
-					(P.flush = function() {
-						return void 0 === s ? l : _(b());
+					(T.flush = function() {
+						return void 0 === l ? s : P(b());
 					}),
-					P
+					T
 				);
 			}
 			function m(e) {
 				var t = typeof e;
 				return !!e && ('object' == t || 'function' == t);
 			}
-			function O(e) {
+			function w(e) {
 				if ('number' == typeof e) return e;
 				if (
 					(function(e) {
@@ -1398,8 +1411,8 @@ module.exports = (function(e) {
 				}
 				if ('string' != typeof e) return 0 === e ? e : +e;
 				e = e.replace(i, '');
-				var r = l.test(e);
-				return r || s.test(e)
+				var r = s.test(e);
+				return r || l.test(e)
 					? u(e.slice(2), r ? 2 : 8)
 					: a.test(e)
 					? n

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-lazy-load-image-component",
-	"version": "1.4.1",
+	"version": "1.5.0",
 	"description": " React Component to lazy load images using a HOC to track window scroll position. ",
 	"main": "build/index.js",
 	"peerDependencies": {

package/src/components/LazyLoadComponent.spec.js

@@ -66,6 +66,7 @@ describe('LazyLoadComponent', function() {
 			isIntersectionObserverAvailable.mockImplementation(() => true);
 			window.IntersectionObserver = jest.fn(function() {
 				this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this
+				this.unobserve = jest.fn(); // eslint-disable-line babel/no-invalid-this
 			});
 
 			const lazyLoadComponent = mount(
@@ -93,6 +94,7 @@ describe('LazyLoadComponent', function() {
 			isIntersectionObserverAvailable.mockImplementation(() => true);
 			window.IntersectionObserver = jest.fn(function() {
 				this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this
+				this.unobserve = jest.fn(); // eslint-disable-line babel/no-invalid-this
 			});
 
 			const lazyLoadComponent = mount(

package/src/components/LazyLoadImage.jsx

@@ -40,6 +40,7 @@ class LazyLoadImage extends React.Component {
 			useIntersectionObserver,
 			visibleByDefault,
 			wrapperClassName,
+			wrapperProps,
 			...imgProps
 		} = this.props;
 
@@ -89,6 +90,7 @@ class LazyLoadImage extends React.Component {
 			placeholderSrc,
 			width,
 			wrapperClassName,
+			wrapperProps,
 		} = this.props;
 		const { loaded } = this.state;
 
@@ -114,6 +116,7 @@ class LazyLoadImage extends React.Component {
 					height: height,
 					width: width,
 				}}
+				{...wrapperProps}
 			>
 				{lazyLoadImage}
 			</span>
@@ -121,11 +124,18 @@ class LazyLoadImage extends React.Component {
 	}
 
 	render() {
-		const { effect, placeholderSrc, visibleByDefault } = this.props;
+		const {
+			effect,
+			placeholderSrc,
+			visibleByDefault,
+			wrapperClassName,
+			wrapperProps,
+		} = this.props;
 
 		const lazyLoadImage = this.getLazyLoadImage();
+		const needsWrapper = (effect || placeholderSrc) && !visibleByDefault;
 
-		if ((!effect && !placeholderSrc) || visibleByDefault) {
+		if (!needsWrapper && !wrapperClassName && !wrapperProps) {
 			return lazyLoadImage;
 		}
 
@@ -144,6 +154,7 @@ LazyLoadImage.propTypes = {
 	useIntersectionObserver: PropTypes.bool,
 	visibleByDefault: PropTypes.bool,
 	wrapperClassName: PropTypes.string,
+	wrapperProps: PropTypes.object,
 };
 
 LazyLoadImage.defaultProps = {

package/src/components/PlaceholderWithoutTracking.jsx

@@ -3,64 +3,61 @@ import ReactDOM from 'react-dom';
 import { PropTypes } from 'prop-types';
 import isIntersectionObserverAvailable from '../utils/intersection-observer';
 
+const checkIntersections = entries => {
+	entries.forEach(entry => {
+		if (entry.isIntersecting) {
+			entry.target.onVisible();
+		}
+	});
+};
+
+const LAZY_LOAD_OBSERVERS = {};
+
+const getObserver = threshold => {
+	LAZY_LOAD_OBSERVERS[threshold] =
+		LAZY_LOAD_OBSERVERS[threshold] ||
+		new IntersectionObserver(checkIntersections, {
+			rootMargin: threshold + 'px',
+		});
+
+	return LAZY_LOAD_OBSERVERS[threshold];
+};
+
 class PlaceholderWithoutTracking extends React.Component {
 	constructor(props) {
 		super(props);
 
-		const supportsObserver =
+		this.supportsObserver =
 			!props.scrollPosition &&
 			props.useIntersectionObserver &&
 			isIntersectionObserverAvailable();
 
-		this.LAZY_LOAD_OBSERVER = { supportsObserver };
-
-		if (supportsObserver) {
+		if (this.supportsObserver) {
 			const { threshold } = props;
 
-			this.LAZY_LOAD_OBSERVER.observer = new IntersectionObserver(
-				this.checkIntersections,
-				{ rootMargin: threshold + 'px' }
-			);
+			this.observer = getObserver(threshold);
 		}
 	}
 
-	checkIntersections(entries) {
-		entries.forEach(entry => {
-			if (entry.isIntersecting) {
-				entry.target.onVisible();
-			}
-		});
-	}
-
 	componentDidMount() {
-		if (
-			this.placeholder &&
-			this.LAZY_LOAD_OBSERVER &&
-			this.LAZY_LOAD_OBSERVER.observer
-		) {
+		if (this.placeholder && this.observer) {
 			this.placeholder.onVisible = this.props.onVisible;
-			this.LAZY_LOAD_OBSERVER.observer.observe(this.placeholder);
+			this.observer.observe(this.placeholder);
 		}
 
-		if (
-			this.LAZY_LOAD_OBSERVER &&
-			!this.LAZY_LOAD_OBSERVER.supportsObserver
-		) {
+		if (!this.supportsObserver) {
 			this.updateVisibility();
 		}
 	}
 
-	componentWillUnMount() {
-		if (this.LAZY_LOAD_OBSERVER) {
-			this.LAZY_LOAD_OBSERVER.observer.unobserve(this.placeholder);
+	componentWillUnmount() {
+		if (this.observer) {
+			this.observer.unobserve(this.placeholder);
 		}
 	}
 
 	componentDidUpdate() {
-		if (
-			this.LAZY_LOAD_OBSERVER &&
-			!this.LAZY_LOAD_OBSERVER.supportsObserver
-		) {
+		if (!this.supportsObserver) {
 			this.updateVisibility();
 		}
 	}
@@ -118,11 +115,24 @@ class PlaceholderWithoutTracking extends React.Component {
 			});
 		}
 
+		const styleProp = {
+			display: 'inline-block',
+			...style,
+		};
+
+		if (typeof width !== 'undefined') {
+			styleProp.width = width;
+		}
+
+		if (typeof height !== 'undefined') {
+			styleProp.height = height;
+		}
+
 		return (
 			<span
 				className={className}
 				ref={el => (this.placeholder = el)}
-				style={{ display: 'inline-block', height, width, ...style }}
+				style={styleProp}
 			>
 				{placeholder}
 			</span>
@@ -133,7 +143,7 @@ class PlaceholderWithoutTracking extends React.Component {
 PlaceholderWithoutTracking.propTypes = {
 	onVisible: PropTypes.func.isRequired,
 	className: PropTypes.string,
-	height: PropTypes.number,
+	height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 	placeholder: PropTypes.element,
 	threshold: PropTypes.number,
 	useIntersectionObserver: PropTypes.bool,
@@ -141,16 +151,14 @@ PlaceholderWithoutTracking.propTypes = {
 		x: PropTypes.number.isRequired,
 		y: PropTypes.number.isRequired,
 	}),
-	width: PropTypes.number,
+	width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
 PlaceholderWithoutTracking.defaultProps = {
 	className: '',
-	height: 0,
 	placeholder: null,
 	threshold: 100,
 	useIntersectionObserver: true,
-	width: 0,
 };
 
 export default PlaceholderWithoutTracking;

package/src/components/PlaceholderWithoutTracking.spec.js

@@ -197,6 +197,7 @@ describe('PlaceholderWithoutTracking', function() {
 		isIntersectionObserverAvailable.mockImplementation(() => true);
 		window.IntersectionObserver = jest.fn(function() {
 			this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this
+			this.unobserve = jest.fn(); // eslint-disable-line babel/no-invalid-this
 		});
 		const onVisible = jest.fn();
 		const component = renderPlaceholderWithoutTracking({
@@ -211,6 +212,7 @@ describe('PlaceholderWithoutTracking', function() {
 		isIntersectionObserverAvailable.mockImplementation(() => true);
 		window.IntersectionObserver = jest.fn(function() {
 			this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this
+			this.unobserve = jest.fn(); // eslint-disable-line babel/no-invalid-this
 		});
 		const offset = 100000;
 		const onVisible = jest.fn();

package/src/effects/opacity.css

@@ -1,5 +1,4 @@
 .lazy-load-image-background.opacity {
-  background-image: none !important;
   opacity: 0;
 }