From 2faab75f017861ab66f9b506ed1ff6f540d53e8e Mon Sep 17 00:00:00 2001 From: Raphael Eidus Date: Sat, 17 May 2014 19:17:06 -0400 Subject: [PATCH] ability to disable debouncing and use throttling #35 --- README.md | 5 +++++ dist/echo.js | 10 ++++++++-- dist/echo.min.js | 2 +- src/echo.js | 10 ++++++++-- 4 files changed, 22 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 53df7ed..a68dadd 100644 --- a/README.md +++ b/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` diff --git a/dist/echo.js b/dist/echo.js index f4497e5..4d018d6 100644 --- a/dist/echo.js +++ b/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; diff --git a/dist/echo.min.js b/dist/echo.min.js index b1c0594..e0fa20e 100644 --- a/dist/echo.min.js +++ b/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); \ No newline at end of file +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); \ No newline at end of file diff --git a/src/echo.js b/src/echo.js index c7f4268..95f7fec 100644 --- a/src/echo.js +++ b/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;