Add option to customize auto-detach behavior

README.md

@@ -83,6 +83,11 @@ Type: `Boolean` Default: `false`
 
 This option will tell echo to unload loaded images once they have scrolled beyond the viewport (including the offset area).
 
+#### autoDetach
+Type: `Boolean` Default: `true`
+
+By default Echo shuts itself down once there are no more images to be loaded (no matches in the current DOM). Set this to `false` to allow persistent background polling. This could be useful when working with filtered/paged collections if you do not wish to call `init` on each change (just call `render` if necessary).
+
 #### callback
 Type: `Function`
 

dist/echo.js

@@ -17,7 +17,7 @@
 
   var callback = function () {};
 
-  var offset, poll, delay, useDebounce, unload;
+  var offset, poll, delay, useDebounce, unload, autoDetach;
 
   var inView = function (element, view) {
     var box = element.getBoundingClientRect();
@@ -52,6 +52,7 @@
     delay = optionToInt(opts.throttle, 250);
     useDebounce = opts.debounce !== false;
     unload = !!opts.unload;
+    autoDetach = opts.autoDetach !== false;
     callback = opts.callback || callback;
     echo.render();
     if (document.addEventListener) {
@@ -90,7 +91,7 @@
         callback(elem, 'unload');
       }
     }
-    if (!length) {
+    if (autoDetach && !length) {
       echo.detach();
     }
   };

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(function(){return e(t)}):"object"==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){"use strict";var e,n,o,r,c,i={},l=function(){},a=function(t,e){var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},d=function(){(r||!n)&&(clearTimeout(n),n=setTimeout(function(){i.render(),n=null},o))};return i.init=function(n){n=n||{};var a=n.offset||0,u=n.offsetVertical||a,f=n.offsetHorizontal||a,s=function(t,e){return parseInt(t||e,10)};e={t:s(n.offsetTop,u),b:s(n.offsetBottom,u),l:s(n.offsetLeft,f),r:s(n.offsetRight,f)},o=s(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,l=n.callback||l,i.render(),document.addEventListener?(t.addEventListener("scroll",d,!1),t.addEventListener("load",d,!1)):(t.attachEvent("onscroll",d),t.attachEvent("onload",d))},i.render=function(){for(var n,o,r=document.querySelectorAll("img[data-echo]"),d=r.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;d>f;f++)o=r[f],a(o,u)?(c&&o.setAttribute("data-echo-placeholder",o.src),o.src=o.getAttribute("data-echo"),c||o.removeAttribute("data-echo"),l(o,"load")):c&&(n=o.getAttribute("data-echo-placeholder"))&&(o.src=n,o.removeAttribute("data-echo-placeholder"),l(o,"unload"));d||i.detach()},i.detach=function(){document.removeEventListener?t.removeEventListener("scroll",d):t.detachEvent("onscroll",d),clearTimeout(n)},i});
+!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,n,o,r,c,i,a={},l=function(){},d=function(t,e){var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},u=function(){(r||!n)&&(clearTimeout(n),n=setTimeout(function(){a.render(),n=null},o))};return a.init=function(n){n=n||{};var d=n.offset||0,f=n.offsetVertical||d,s=n.offsetHorizontal||d,h=function(t,e){return parseInt(t||e,10)};e={t:h(n.offsetTop,f),b:h(n.offsetBottom,f),l:h(n.offsetLeft,s),r:h(n.offsetRight,s)},o=h(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,i=n.autoDetach!==!1,l=n.callback||l,a.render(),document.addEventListener?(t.addEventListener("scroll",u,!1),t.addEventListener("load",u,!1)):(t.attachEvent("onscroll",u),t.attachEvent("onload",u))},a.render=function(){for(var n,o,r=document.querySelectorAll("img[data-echo]"),u=r.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},s=0;u>s;s++)o=r[s],d(o,f)?(c&&o.setAttribute("data-echo-placeholder",o.src),o.src=o.getAttribute("data-echo"),c||o.removeAttribute("data-echo"),l(o,"load")):c&&(n=o.getAttribute("data-echo-placeholder"))&&(o.src=n,o.removeAttribute("data-echo-placeholder"),l(o,"unload"));i&&!u&&a.detach()},a.detach=function(){document.removeEventListener?t.removeEventListener("scroll",u):t.detachEvent("onscroll",u),clearTimeout(n)},a});

src/echo.js

@@ -16,7 +16,7 @@
 
   var callback = function () {};
 
-  var offset, poll, delay, useDebounce, unload;
+  var offset, poll, delay, useDebounce, unload, autoDetach;
 
   var inView = function (element, view) {
     var box = element.getBoundingClientRect();
@@ -51,6 +51,7 @@
     delay = optionToInt(opts.throttle, 250);
     useDebounce = opts.debounce !== false;
     unload = !!opts.unload;
+    autoDetach = opts.autoDetach !== false;
     callback = opts.callback || callback;
     echo.render();
     if (document.addEventListener) {
@@ -89,7 +90,7 @@
         callback(elem, 'unload');
       }
     }
-    if (!length) {
+    if (autoDetach && !length) {
       echo.detach();
     }
   };