fix issue #83 (Image Inside a Scrollable div Would not be Loaded)

src/echo.js

@@ -1,134 +1,135 @@
-(function() {
+(function (root, factory) {
-    'use strict';
+  if (typeof define === 'function' && define.amd) {
+    define(function() {
+      return factory(root);
+    });
+  } else if (typeof exports === 'object') {
+    module.exports = factory;
+  } else {
+    root.echo = factory(root);
+  }
+})(this, function (root) {
+
+  'use strict';
+
+  var echo = {};
+
+  var callback = function () {};
+
+  var offset, poll, delay, useDebounce, unload;
+
+  var isHidden = function (element) {
+    return (element.offsetParent === null);
+  };
+  
+  var inView = function (element, view) {
+    if (isHidden(element)) {
+      return false;
+    }
 
-    var echo = {};
+    var box = element.getBoundingClientRect();
-    var root = {};
+    return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
+  };
 
-    var callback = function () {
+  var debounceOrThrottle = function () {
+    if(!useDebounce && !!poll) {
+      return;
+    }
+    clearTimeout(poll);
+    poll = setTimeout(function(){
+      echo.render();
+      poll = null;
+    }, delay);
+  };
+
+  echo.init = function (opts) {
+    opts = opts || {};
+    root = opts.viewport || this || (0,eval)('this');
+    var offsetAll = opts.offset || 0;
+    var offsetVertical = opts.offsetVertical || offsetAll;
+    var offsetHorizontal = opts.offsetHorizontal || offsetAll;
+    var optionToInt = function (opt, fallback) {
+      return parseInt(opt || fallback, 10);
     };
-
+    offset = {
-    var offset, poll, delay, useDebounce, unload;
+      t: optionToInt(opts.offsetTop, offsetVertical),
-
+      b: optionToInt(opts.offsetBottom, offsetVertical),
-    var isHidden = function (element) {
+      l: optionToInt(opts.offsetLeft, offsetHorizontal),
-        return (element.offsetParent === null);
+      r: optionToInt(opts.offsetRight, offsetHorizontal)
+    };
+    delay = optionToInt(opts.throttle, 250);
+    useDebounce = opts.debounce !== false;
+    unload = !!opts.unload;
+    callback = opts.callback || callback;
+    echo.render();
+    if (document.addEventListener) {
+      root.addEventListener('scroll', debounceOrThrottle, false);
+      root.addEventListener('load', debounceOrThrottle, false);
+    } else {
+      root.attachEvent('onscroll', debounceOrThrottle);
+      root.attachEvent('onload', debounceOrThrottle);
+    }
+  };
+
+  echo.render = function () {
+    var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]');
+    var length = nodes.length;
+    var src, elem;
+    var view = {
+      l: 0 - offset.l,
+      t: 0 - offset.t,
+      b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,
+      r: (root.innerWidth || document.documentElement.clientWidth) + offset.r
     };
+    for (var i = 0; i < length; i++) {
+      elem = nodes[i];
+      if (inView(elem, view)) {
 
-    var inView = function (element, view) {
+        if (unload) {
-        if (isHidden(element)) {
+          elem.setAttribute('data-echo-placeholder', elem.src);
-            return false;
         }
 
-        var box = element.getBoundingClientRect();
+        if (elem.getAttribute('data-echo-background') !== null) {
-        return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
+          elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")";
-    };
+        }
-
+        else {
-    var debounceOrThrottle = function () {
+          elem.src = elem.getAttribute('data-echo');
-        if (!useDebounce && !!poll) {
-            return;
         }
-        clearTimeout(poll);
-        poll = setTimeout(function () {
-            echo.render();
-            poll = null;
-        }, delay);
-    };
 
-    echo.init = function (opts) {
+        if (!unload) {
-        opts = opts || {};
+          elem.removeAttribute('data-echo');
-        root = opts.viewport || this || (0,eval)('this')
+          elem.removeAttribute('data-echo-background');
-        var offsetAll = opts.offset || 0;
-        var offsetVertical = opts.offsetVertical || offsetAll;
-        var offsetHorizontal = opts.offsetHorizontal || offsetAll;
-        var optionToInt = function (opt, fallback) {
-            return parseInt(opt || fallback, 10);
-        };
-        offset = {
-            t: optionToInt(opts.offsetTop, offsetVertical),
-            b: optionToInt(opts.offsetBottom, offsetVertical),
-            l: optionToInt(opts.offsetLeft, offsetHorizontal),
-            r: optionToInt(opts.offsetRight, offsetHorizontal)
-        };
-        delay = optionToInt(opts.throttle, 250);
-        useDebounce = opts.debounce !== false;
-        unload = !!opts.unload;
-        callback = opts.callback || callback;
-        echo.render();
-        if (document.addEventListener) {
-            root.addEventListener('scroll', debounceOrThrottle, false);
-            root.addEventListener('load', debounceOrThrottle, false);
-        } else {
-            root.attachEvent('onscroll', debounceOrThrottle);
-            root.attachEvent('onload', debounceOrThrottle);
         }
-    };
 
-    echo.render = function () {
+        callback(elem, 'load');
-        var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]');
+      }
-        var length = nodes.length;
+      else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
-        var src, elem;
+
-        var view = {
+        if (elem.getAttribute('data-echo-background') !== null) {
-            l: 0 - offset.l,
+          elem.style.backgroundImage = "url(" + src + ")";
-            t: 0 - offset.t,
-            b: (root.innerHeight || root.clientHeight) + offset.b,
-            r: (root.innerWidth || root.clientWidth) + offset.r
-        };
-        for (var i = 0; i < length; i++) {
-            elem = nodes[i];
-            if (inView(elem, view)) {
-
-                if (unload) {
-                    elem.setAttribute('data-echo-placeholder', elem.src);
-                }
-
-                if (elem.getAttribute('data-echo-background') !== null) {
-                    elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")";
-                }
-                else {
-                    elem.src = elem.getAttribute('data-echo');
-                }
-
-                if (!unload) {
-                    elem.removeAttribute('data-echo');
-                    elem.removeAttribute('data-echo-background');
-                }
-
-                callback(elem, 'load');
-            }
-            else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
-
-                if (elem.getAttribute('data-echo-background') !== null) {
-                    elem.style.backgroundImage = "url(" + src + ")";
-                }
-                else {
-                    elem.src = src;
-                }
-
-                elem.removeAttribute('data-echo-placeholder');
-                callback(elem, 'unload');
-            }
         }
-        if (!length) {
+        else {
-            echo.detach();
+          elem.src = src;
         }
-    };
 
-    echo.detach = function () {
+        elem.removeAttribute('data-echo-placeholder');
-        if (document.removeEventListener) {
+        callback(elem, 'unload');
-            root.removeEventListener('scroll', debounceOrThrottle);
+      }
-        } else {
+    }
-            root.detachEvent('onscroll', debounceOrThrottle);
+    if (!length) {
-        }
+      echo.detach();
-        clearTimeout(poll);
+    }
-    };
+  };
 
-    if ((typeof module !== "undefined" && module !== null) && module.exports) {
+  echo.detach = function () {
-        module.exports = echo;
+    if (document.removeEventListener) {
-    } else if (typeof define === 'function') {
+      root.removeEventListener('scroll', debounceOrThrottle);
-        define(function() {
-            return echo;
-        });
     } else {
-        root.echo = echo;
+      root.detachEvent('onscroll', debounceOrThrottle);
     }
-}());
+    clearTimeout(poll);
+  };
+
+  return echo;
 
+});