ability to disable debouncing and use throttling #35

README.md

@@ -77,6 +77,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).
 This option requires the `placeholder` option also be set.
 
+#### debounce
+Type: `Boolean` Default: `true`
+
+By default the throttling function is actually a [debounce](http://underscorejs.org/#debounce) function so that the checking function is only triggered after a user stops scrolling. To use traditional throttling where it will only check the images every `throttle` milliseconds, set `debounce` to `false`.
+
 #### callback
 Type: `Function`
 

dist/echo.js

@@ -10,9 +10,9 @@ window.Echo = (function (global, document, undefined) {
   var callback = function(){};
 
   /**
-   * offset, throttle, poll, unload vars
+   * offset, throttle, poll, unload, debounce vars
    */
-  var offset, throttle, poll, unload;
+  var offset, throttle, poll, unload, debounce;
 
   /**
    *  _inView
@@ -37,6 +37,7 @@ window.Echo = (function (global, document, undefined) {
         view,
         nodes = document.querySelectorAll('img[data-echo]'),
         length = nodes.length;
+    poll = null;
     view = {
       l: 0 - offset.l,
       t: 0 - offset.t,
@@ -70,6 +71,9 @@ window.Echo = (function (global, document, undefined) {
    * @private
    */
   var _throttle = function () {
+    if(!debounce && !!poll) {
+      return;
+    }
     clearTimeout(poll);
     poll = setTimeout(_pollImages, throttle);
   };
@@ -84,6 +88,7 @@ window.Echo = (function (global, document, undefined) {
    * @param {Number|String} [opts.offsetLeft]
    * @param {Number|String} [opts.offsetRight]
    * @param {Boolean} [opts.unload]
+   * @param {Boolean} [opts.debounce]
    * @param {Function} [opts.callback]
    */
   var init = function (opts) {
@@ -105,6 +110,7 @@ window.Echo = (function (global, document, undefined) {
     };
     throttle = optionToInt(opts.throttle, 250);
     unload = !!opts.unload;
+    debounce = opts.debounce !== false;
     callback = opts.callback || callback;
 
 

dist/echo.min.js

@@ -1,2 +1,2 @@
 /*! Echo v1.5.0 | (c) 2014 @toddmotto | MIT license | github.com/toddmotto/echo */
-window.Echo=function(a,b){"use strict";var c,d,e,f,g=function(){},h=function(a,b){var c=a.getBoundingClientRect();return c.right>=b.l&&c.bottom>=b.t&&c.left<=b.r&&c.top<=b.b},i=function(){var a,d,e,i,j=b.querySelectorAll("img[data-echo]"),k=j.length;for(i={l:0-c.l,t:0-c.t,b:(window.innerHeight||b.documentElement.clientHeight)+c.b,r:(window.innerWidth||b.documentElement.clientWidth)+c.r},d=0;k>d;d++)e=j[d],h(e,i)?(f&&e.setAttribute("data-echo-placeholder",e.src),e.src=e.getAttribute("data-echo"),f||e.removeAttribute("data-echo"),g(e,"load")):f&&(a=e.getAttribute("data-echo-placeholder"))&&(e.src=a,e.removeAttribute("data-echo-placeholder"),g(e,"unload"));k||l()},j=function(){clearTimeout(e),e=setTimeout(i,d)},k=function(e){function h(a,b){return parseInt(a||b,10)}e=e||{};var k=e.offset||0,l=e.offsetVertical||k,m=e.offsetHorizontal||k;c={t:h(e.offsetTop,l),b:h(e.offsetBottom,l),l:h(e.offsetLeft,m),r:h(e.offsetRight,m)},d=h(e.throttle,250),f=!!e.unload,g=e.callback||g,i(),b.addEventListener?(a.addEventListener("scroll",j,!1),a.addEventListener("load",j,!1)):(a.attachEvent("onscroll",j),a.attachEvent("onload",j))},l=function(){b.removeEventListener?a.removeEventListener("scroll",j):a.detachEvent("onscroll",j),clearTimeout(e)};return{init:k,detach:l,render:i}}(this,document);
+window.Echo=function(a,b){"use strict";var c,d,e,f,g,h=function(){},i=function(a,b){var c=a.getBoundingClientRect();return c.right>=b.l&&c.bottom>=b.t&&c.left<=b.r&&c.top<=b.b},j=function(){var a,d,g,j,k=b.querySelectorAll("img[data-echo]"),l=k.length;for(e=null,j={l:0-c.l,t:0-c.t,b:(window.innerHeight||b.documentElement.clientHeight)+c.b,r:(window.innerWidth||b.documentElement.clientWidth)+c.r},d=0;l>d;d++)g=k[d],i(g,j)?(f&&g.setAttribute("data-echo-placeholder",g.src),g.src=g.getAttribute("data-echo"),f||g.removeAttribute("data-echo"),h(g,"load")):f&&(a=g.getAttribute("data-echo-placeholder"))&&(g.src=a,g.removeAttribute("data-echo-placeholder"),h(g,"unload"));l||m()},k=function(){(g||!e)&&(clearTimeout(e),e=setTimeout(j,d))},l=function(e){function i(a,b){return parseInt(a||b,10)}e=e||{};var l=e.offset||0,m=e.offsetVertical||l,n=e.offsetHorizontal||l;c={t:i(e.offsetTop,m),b:i(e.offsetBottom,m),l:i(e.offsetLeft,n),r:i(e.offsetRight,n)},d=i(e.throttle,250),f=!!e.unload,g=e.debounce!==!1,h=e.callback||h,j(),b.addEventListener?(a.addEventListener("scroll",k,!1),a.addEventListener("load",k,!1)):(a.attachEvent("onscroll",k),a.attachEvent("onload",k))},m=function(){b.removeEventListener?a.removeEventListener("scroll",k):a.detachEvent("onscroll",k),clearTimeout(e)};return{init:l,detach:m,render:j}}(this,document);

src/echo.js

@@ -9,9 +9,9 @@ window.Echo = (function (global, document, undefined) {
   var callback = function(){};
 
   /**
-   * offset, throttle, poll, unload vars
+   * offset, throttle, poll, unload, debounce vars
    */
-  var offset, throttle, poll, unload;
+  var offset, throttle, poll, unload, debounce;
 
   /**
    *  _inView
@@ -36,6 +36,7 @@ window.Echo = (function (global, document, undefined) {
         view,
         nodes = document.querySelectorAll('img[data-echo]'),
         length = nodes.length;
+    poll = null;
     view = {
       l: 0 - offset.l,
       t: 0 - offset.t,
@@ -69,6 +70,9 @@ window.Echo = (function (global, document, undefined) {
    * @private
    */
   var _throttle = function () {
+    if(!debounce && !!poll) {
+      return;
+    }
     clearTimeout(poll);
     poll = setTimeout(_pollImages, throttle);
   };
@@ -83,6 +87,7 @@ window.Echo = (function (global, document, undefined) {
    * @param {Number|String} [opts.offsetLeft]
    * @param {Number|String} [opts.offsetRight]
    * @param {Boolean} [opts.unload]
+   * @param {Boolean} [opts.debounce]
    * @param {Function} [opts.callback]
    */
   var init = function (opts) {
@@ -104,6 +109,7 @@ window.Echo = (function (global, document, undefined) {
     };
     throttle = optionToInt(opts.throttle, 250);
     unload = !!opts.unload;
+    debounce = opts.debounce !== false;
     callback = opts.callback || callback;