Dom mutations support

src/LazyLoad.jsx

@@ -8,6 +8,7 @@ const throttle = require('lodash.throttle');
 
 const parentScroll = require('./utils/parentScroll');
 const inViewport = require('./utils/inViewport');
+const mutationsObserver = require('./utils/domObserver');
 
 class LazyLoad extends Component {
   constructor(props) {
@@ -36,7 +37,9 @@ class LazyLoad extends Component {
     }
 
     add(window, 'resize', this.lazyLoadHandler);
+    add(window, 'load', this.lazyLoadHandler);
     add(eventNode, 'scroll', this.lazyLoadHandler);
+    mutationsObserver.registerCallback(this.lazyLoadHandler);
   }
 
   componentWillReceiveProps() {
@@ -100,7 +103,9 @@ class LazyLoad extends Component {
     const eventNode = this.getEventNode();
 
     remove(window, 'resize', this.lazyLoadHandler);
+    remove(window, 'load', this.lazyLoadHandler);
     remove(eventNode, 'scroll', this.lazyLoadHandler);
+    mutationsObserver.unregisterCallback(this.lazyLoadHandler);
   }
 
   render() {

src/utils/domObserver.js

@@ -0,0 +1,37 @@
+
+let _observer = null;
+
+const _callbacks = [];
+const _observerConfig = { childList: true, subtree: true };
+
+function _executeCallbacks() {
+  _callbacks.forEach((cb) => {
+    try {
+      cb();
+    } catch (ex) { } // eslint-disable-line no-empty
+  });
+}
+/**
+ * If browser supports the feature, create a unique observer that listens
+ * for DOM changes, and executes the registered callbacks (_callbacks).
+ */
+if (typeof MutationObserver !== 'undefined') {
+  _observer = new MutationObserver(_executeCallbacks);
+  _observer.observe(document.body, _observerConfig);
+} else {
+  // IE10 and IE9 fallback
+  document.body.addEventListener('DOMSubtreeModified', _executeCallbacks);
+}
+
+export function registerCallback(cb) {
+  if (_callbacks.indexOf(cb) !== -1) {
+    _callbacks.push(cb);
+  }
+}
+
+export function unregisterCallback(cb) {
+  const idx = _callbacks.indexOf(cb);
+  if (idx !== -1) {
+    _callbacks.splice(idx, 1);
+  }
+}