react-lazy-load-image-component 1.4.2 → 1.5.1

package/.github/workflows/codeql-analysis.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+name: "CodeQL"
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [master]
+  schedule:
+    - cron: '0 14 * * 1'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['javascript']
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file. 
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

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`)
@@ -251,6 +252,18 @@ export default trackWindowScroll(Gallery);
 
 ## Common errors
 
+### All images are being loaded at once
+
+This package loads images when they are visible in the viewport. Before an image is loaded, it occupies 0x0 pixels, so if you have a gallery of images, that means all images will be in the visible part of the page until the first ones load and start pushing down the other ones.
+
+To fix this issue, make sure you either set a `height` and `width` props or a `placeholder` to your images.
+
+### Effects are not working
+
+You need to import the effect CSS as shown in the [Using effects](#using-effects) code example.
+
+Also, notice browsers might behave differently while images are loading. Some times, while an image is not completely loaded yet, the browser will show a white background behind it, making the effect not to be visible. This is an issue with browsers and not something that can be fixed in this package.
+
 ### Warning: setState(...): Can only update a mounted or mounting component.
 
 That warning might appear if there are two components using `trackWindowScroll` at the same time. Notice it's not possible to have a LazyLoadImage/LazyLoadComponent inside another LazyLoadComponent for now. Also, make sure you are passing down `scrollPosition` to all components wrapped inside `trackWindowScroll`.

package/build/index.js

@@ -275,15 +275,29 @@ module.exports = (function(e) {
 		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,182 +309,170 @@ module.exports = (function(e) {
 					})(
 						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' }
 					);
+					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,
-								s = t.y;
-							return Boolean(
-								s - 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,
-								s = t.style,
-								l = t.width;
-							if (a && 'function' != typeof a.type)
-								return i.default.cloneElement(a, {
-									ref: function(t) {
-										return (e.placeholder = t);
-									},
-								});
-							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,
+						{
+							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);
 										},
-										style: u,
-									},
-									a
-								)
-							);
+									});
+								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: u,
+										},
+										a
+									)
+								);
+							},
 						},
-					},
-				]),
-				t
-			);
-		})(i.default.Component);
-		(c.propTypes = {
+					]),
+					t
+				);
+			})(i.default.Component);
+		(d.propTypes = {
 			onVisible: s.PropTypes.func.isRequired,
 			className: s.PropTypes.string,
 			height: s.PropTypes.oneOfType([
@@ -489,13 +491,13 @@ module.exports = (function(e) {
 				s.PropTypes.string,
 			]),
 		}),
-			(c.defaultProps = {
+			(d.defaultProps = {
 				className: '',
 				placeholder: null,
 				threshold: 100,
 				useIntersectionObserver: !0,
 			}),
-			(t.default = c);
+			(t.default = d);
 	},
 	function(e, t) {
 		e.exports = require('react-dom');
@@ -879,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)
@@ -902,6 +905,7 @@ module.exports = (function(e) {
 										'useIntersectionObserver',
 										'visibleByDefault',
 										'wrapperClassName',
+										'wrapperProps',
 									]));
 							return i.default.createElement(
 								'img',
@@ -950,31 +954,34 @@ module.exports = (function(e) {
 						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' : '';
+								o = t.height,
+								a = t.placeholderSrc,
+								s = t.width,
+								l = t.wrapperClassName,
+								u = t.wrapperProps,
+								c = this.state.loaded,
+								f = c ? ' lazy-load-image-loaded' : '';
 							return i.default.createElement(
 								'span',
-								{
-									className:
-										s +
-										' lazy-load-image-background ' +
-										r +
-										u,
-									style: {
-										backgroundImage:
-											l || !o ? '' : 'url(' + o + ')',
-										backgroundSize:
-											l || !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%',
+											display: 'inline-block',
+											height: o,
+											width: s,
+										},
 									},
-								},
+									u
+								),
 								e
 							);
 						},
@@ -986,10 +993,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;
 						},
 					},
 				]),
@@ -1007,6 +1016,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() {
@@ -1223,18 +1233,18 @@ module.exports = (function(e) {
 					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), (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);
+					if (O(e)) return P(e);
 					l = setTimeout(
 						g,
 						(function(e) {
@@ -1243,22 +1253,22 @@ module.exports = (function(e) {
 						})(e)
 					);
 				}
-				function _(e) {
-					return (l = void 0), d && o ? O(e) : ((o = i = void 0), s);
+				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 === l)
 							return (function(e) {
 								return (
 									(c = e),
 									(l = setTimeout(g, t)),
-									f ? O(e) : s
+									f ? w(e) : s
 								);
 							})(u);
-						if (p) return (l = setTimeout(g, t)), O(u);
+						if (p) return (l = setTimeout(g, t)), w(u);
 					}
 					return void 0 === l && (l = setTimeout(g, t)), s;
 				}
@@ -1270,15 +1280,15 @@ module.exports = (function(e) {
 							? y(m(n.maxWait) || 0, t)
 							: a),
 						(d = 'trailing' in n ? !!n.trailing : d)),
-					(P.cancel = function() {
+					(T.cancel = function() {
 						void 0 !== l && clearTimeout(l),
 							(c = 0),
 							(o = u = i = l = void 0);
 					}),
-					(P.flush = function() {
-						return void 0 === l ? s : _(b());
+					(T.flush = function() {
+						return void 0 === l ? s : P(b());
 					}),
-					P
+					T
 				);
 			};
 		}.call(this, r(7)));
@@ -1323,13 +1333,13 @@ module.exports = (function(e) {
 						n = i;
 					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);
+					if (O(e)) return P(e);
 					l = setTimeout(
 						g,
 						(function(e) {
@@ -1338,12 +1348,12 @@ module.exports = (function(e) {
 						})(e)
 					);
 				}
-				function _(e) {
+				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 === l)
 							return (function(e) {
@@ -1358,29 +1368,29 @@ module.exports = (function(e) {
 					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() {
+					(T.cancel = function() {
 						void 0 !== l && clearTimeout(l),
 							(c = 0),
 							(o = u = i = l = void 0);
 					}),
-					(P.flush = function() {
-						return void 0 === l ? s : _(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) {

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "react-lazy-load-image-component",
-	"version": "1.4.2",
+	"version": "1.5.1",
 	"description": " React Component to lazy load images using a HOC to track window scroll position. ",
 	"main": "build/index.js",
 	"peerDependencies": {
-		"react": "^15.x.x || ^16.x.x",
-		"react-dom": "^15.x.x || ^16.x.x"
+		"react": "^15.x.x || ^16.x.x || ^17.x.x",
+		"react-dom": "^15.x.x || ^16.x.x || ^17.x.x"
 	},
 	"dependencies": {
 		"lodash.debounce": "^4.0.8",

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);
+		if (this.observer) {
+			this.observer.unobserve(this.placeholder);
 		}
 	}
 
 	componentDidUpdate() {
-		if (
-			this.LAZY_LOAD_OBSERVER &&
-			!this.LAZY_LOAD_OBSERVER.supportsObserver
-		) {
+		if (!this.supportsObserver) {
 			this.updateVisibility();
 		}
 	}

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;
 }