test if the element is visible before loading #52

dist/echo.js

@@ -1,7 +1,9 @@
 /*! echo.js v1.6.0 | (c) 2014 @toddmotto | https://github.com/toddmotto/echo */
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
-    define(factory);
+    define(function() {
+      return factory(root);
+    });
   } else if (typeof exports === 'object') {
     module.exports = factory;
   } else {
@@ -19,7 +21,8 @@
 
   var inView = function (element, view) {
     var box = element.getBoundingClientRect();
-    return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
+    var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;
+    return isVisible && (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
   };
 
   var debounce = function () {

dist/echo.min.js

@@ -1,2 +1,2 @@
 /*! echo.js v1.6.0 | (c) 2014 @toddmotto | https://github.com/toddmotto/echo */
-!function(t,e){"function"==typeof define&&define.amd?define(e):"object"==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){"use strict";var e,o,n,r,c={},i=function(){},a=function(t,e){var o=t.getBoundingClientRect();return o.right>=e.l&&o.bottom>=e.t&&o.left<=e.r&&o.top<=e.b},d=function(){clearTimeout(o),o=setTimeout(c.render,n)};return c.init=function(o){o=o||{};var a=o.offset||0,l=o.offsetVertical||a,u=o.offsetHorizontal||a,f=function(t,e){return parseInt(t||e,10)};e={t:f(o.offsetTop,l),b:f(o.offsetBottom,l),l:f(o.offsetLeft,u),r:f(o.offsetRight,u)},n=f(o.throttle,250),r=!!o.unload,i=o.callback||i,c.render(),document.addEventListener?(t.addEventListener("scroll",d,!1),t.addEventListener("load",d,!1)):(t.attachEvent("onscroll",d),t.attachEvent("onload",d))},c.render=function(){for(var o,n,d=document.querySelectorAll("img[data-echo]"),l=d.length,u={l:0-e.l,t:0-e.t,b:(t.innerHeight||document.documentElement.clientHeight)+e.b,r:(t.innerWidth||document.documentElement.clientWidth)+e.r},f=0;l>f;f++)n=d[f],a(n,u)?(r&&n.setAttribute("data-echo-placeholder",n.src),n.src=n.getAttribute("data-echo"),r||n.removeAttribute("data-echo"),i(n,"load")):r&&(o=n.getAttribute("data-echo-placeholder"))&&(n.src=o,n.removeAttribute("data-echo-placeholder"),i(n,"unload"));l||c.detach()},c.detach=function(){document.removeEventListener?t.removeEventListener("scroll",d):t.detachEvent("onscroll",d),clearTimeout(o)},c});
+!function(t,e){"function"==typeof define&&define.amd?define(function(){return e(t)}):"object"==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){"use strict";var e,o,n,r,c={},i=function(){},a=function(t,e){var o=t.getBoundingClientRect(),n=t.offsetWidth>0||t.offsetHeight>0;return n&&o.right>=e.l&&o.bottom>=e.t&&o.left<=e.r&&o.top<=e.b},d=function(){clearTimeout(o),o=setTimeout(c.render,n)};return c.init=function(o){o=o||{};var a=o.offset||0,l=o.offsetVertical||a,f=o.offsetHorizontal||a,u=function(t,e){return parseInt(t||e,10)};e={t:u(o.offsetTop,l),b:u(o.offsetBottom,l),l:u(o.offsetLeft,f),r:u(o.offsetRight,f)},n=u(o.throttle,250),r=!!o.unload,i=o.callback||i,c.render(),document.addEventListener?(t.addEventListener("scroll",d,!1),t.addEventListener("load",d,!1)):(t.attachEvent("onscroll",d),t.attachEvent("onload",d))},c.render=function(){for(var o,n,d=document.querySelectorAll("img[data-echo]"),l=d.length,f={l:0-e.l,t:0-e.t,b:(t.innerHeight||document.documentElement.clientHeight)+e.b,r:(t.innerWidth||document.documentElement.clientWidth)+e.r},u=0;l>u;u++)n=d[u],a(n,f)?(r&&n.setAttribute("data-echo-placeholder",n.src),n.src=n.getAttribute("data-echo"),r||n.removeAttribute("data-echo"),i(n,"load")):r&&(o=n.getAttribute("data-echo-placeholder"))&&(n.src=o,n.removeAttribute("data-echo-placeholder"),i(n,"unload"));l||c.detach()},c.detach=function(){document.removeEventListener?t.removeEventListener("scroll",d):t.detachEvent("onscroll",d),clearTimeout(o)},c});

src/echo.js

@@ -1,7 +1,7 @@
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
     define(function() {
-      return factory(root)
+      return factory(root);
     });
   } else if (typeof exports === 'object') {
     module.exports = factory;
@@ -20,7 +20,8 @@
 
   var inView = function (element, view) {
     var box = element.getBoundingClientRect();
-    return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
+    var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;
+    return isVisible && (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
   };
 
   var debounce = function () {