Merge pull request #23 from andrew1007/hot-fix/mutation-observer-ssr

Hot fix/mutation observer SSR
andrew1007 · May 27, 2022 · e52de29 · e52de29
2 parents 4405135 + 4077c57
commit e52de29
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-on-images-loaded",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "OnImagesLoaded",
   "license": "MIT",
   "main": "lib/OnImagesLoaded.js",

diff --git a/src/OnImagesLoaded.tsx b/src/OnImagesLoaded.tsx
@@ -47,7 +47,7 @@ export default class OnImagesLoaded extends Component<Props, state> {
 	private mounted: boolean
 	private _imgs: any[]
 	private imageLoad: HTMLDivElement | null
-	private observer: MutationObserver
+	// private observer: MutationObserver
 	private invokedCount: number
 
 	constructor(props: Props) {
@@ -65,7 +65,7 @@ export default class OnImagesLoaded extends Component<Props, state> {
 		this.mounted = false
 		this._imgs = []
 		this.imageLoad = null
-		this.observer = new MutationObserver(noop)
+		// this.observer = new MutationObserver(noop)
 		this.invokedCount = 0
 	}
 
@@ -79,36 +79,36 @@ export default class OnImagesLoaded extends Component<Props, state> {
 	componentWillUnmount() {
 		this.mounted = false
 		this._imgs.length > 0 ? this._removeImageListeners() : null
-		this.observer.disconnect()
-	}
-
-	private initObserver() {
-		this.observer = new MutationObserver((mutationsList) => {
-			for (const mutation of mutationsList) {
-				if (mutation.type !== 'childList') return
-				const { imageCount } = this.state
-				const nextCount = imageCount + mutation.addedNodes.length - mutation.removedNodes.length
-				this.setState({
-					imageCount: nextCount
-				}, () => {
-					mutation.removedNodes.forEach(node => {
-						if (node.nodeName === 'IMG') {
-							node.addEventListener('load', this._onUpdate)
-						}
-					})
-					mutation.addedNodes.forEach(node => {
-						if (node.nodeName === 'IMG') {
-							node.addEventListener('load', this._onUpdate)
-						}
-					})
-				})
-			}
-		})
-		if (this.imageLoad) {
-			const config = { attributes: true, childList: true, subtree: true };
-			this.observer.observe(this.imageLoad, config)
-		}
-	}
+		// this.observer.disconnect()
+	}
+
+	// private initObserver() {
+	// 	this.observer = new MutationObserver((mutationsList) => {
+	// 		for (const mutation of mutationsList) {
+	// 			if (mutation.type !== 'childList') return
+	// 			const { imageCount } = this.state
+	// 			const nextCount = imageCount + mutation.addedNodes.length - mutation.removedNodes.length
+	// 			this.setState({
+	// 				imageCount: nextCount
+	// 			}, () => {
+	// 				mutation.removedNodes.forEach(node => {
+	// 					if (node.nodeName === 'IMG') {
+	// 						node.addEventListener('load', this._onUpdate)
+	// 					}
+	// 				})
+	// 				mutation.addedNodes.forEach(node => {
+	// 					if (node.nodeName === 'IMG') {
+	// 						node.addEventListener('load', this._onUpdate)
+	// 					}
+	// 				})
+	// 			})
+	// 		}
+	// 	})
+	// 	if (this.imageLoad) {
+	// 		const config = { attributes: true, childList: true, subtree: true };
+	// 		this.observer.observe(this.imageLoad, config)
+	// 	}
+	// }
 
 	private _onUpdate() {
 		if (!this.mounted) return