diff --git a/README.md b/README.md index 449071c..67d5edd 100644 --- a/README.md +++ b/README.md @@ -49,19 +49,14 @@ The `offsetBot` option allows you to specify how far below the viewport you want #### throttle Type: `Number|String` Default: `250` +The throttle is managed by an internal function that prevents performance issues from continuous firing of `window.onscroll` events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is `250` milliseconds. + #### unload 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. -#### placeholder -Type: `String` - -When `unload` is enabled it will replace the image's `src` with this value - -The throttle is managed by an internal function that prevents performance issues from continuous firing of `window.onscroll` events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is `250` milliseconds. - ## .render() API Echo's callback `render()` can be used to make Echo poll your images when you're not scrolling, for instance if you've got a filter layout that swaps images but does not scroll, you need to call the internal functions without scrolling. Use `render()` for this: diff --git a/dist/echo.js b/dist/echo.js index afcc830..2954f75 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -16,9 +16,9 @@ window.Echo = (function (global, document, undefined) { var toBeUnloaded = []; /** - * offsetBot, offsetTop throttle, poll, unload, placeholder vars + * offsetBot, offsetTop throttle, poll, unload vars */ - var offsetBot, offsetTop, throttle, poll, unload, placeholder; + var offsetBot, offsetTop, throttle, poll, unload; /** * _inView @@ -47,13 +47,14 @@ window.Echo = (function (global, document, undefined) { for (i = 0; i < loadingLength; i++) { self = toBeLoaded[i]; if (self && _inView(self)) { + if(unload) { + self.setAttribute('data-echo-placeholder', self.src); + toBeUnloaded.push(self); + } self.src = self.getAttribute('data-echo'); toBeLoaded.splice(i, 1); loadingLength = toBeLoaded.length; i--; - if(unload && !!placeholder) { - toBeUnloaded.push(self); - } } } } @@ -62,7 +63,7 @@ window.Echo = (function (global, document, undefined) { for(i = 0; i < unloadingLength; i++) { self = toBeUnloaded[i]; if (self && !_inView(self)) { - self.src = placeholder; + self.src = self.getAttribute('data-echo-placeholder'); toBeUnloaded.splice(i, 1); unloadingLength = toBeUnloaded.length; i--; @@ -92,7 +93,6 @@ window.Echo = (function (global, document, undefined) { * @param {Number|String} [obj.offsetBot] * @param {Number|String} [obj.offsetTop] * @param {Boolean} [obj.unload] - * @param {String} [obj.placeholder] */ var init = function (obj) { @@ -103,7 +103,6 @@ window.Echo = (function (global, document, undefined) { offsetTop = parseInt(opts.offsetTop || offset); throttle = parseInt(opts.throttle || 250); unload = !!opts.unload; - placeholder = opts.placeholder; toBeLoaded = []; toBeUnloaded = []; diff --git a/dist/echo.min.js b/dist/echo.min.js index c3d2071..7e3d732 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,h,i=[],j=[],k=function(a){var e=a.getBoundingClientRect(),f=e.top>=0&&e.left>=0&&e.top<=(window.innerHeight||b.documentElement.clientHeight)+c&&e.top>=-1*d,g=e.bottom>=-1*d&&e.left>=0&&e.bottom<=(window.innerHeight||b.documentElement.clientHeight)+c;return f||g},l=function(){var a,b,c,d=i.length;if(d>0)for(b=0;d>b;b++)c=i[b],c&&k(c)&&(c.src=c.getAttribute("data-echo"),i.splice(b,1),d=i.length,b--,g&&h&&j.push(c));if(a=j.length,a>0)for(b=0;a>b;b++)c=j[b],c&&!k(c)&&(c.src=h,j.splice(b,1),a=j.length,b--,i.push(c));0===a&&0===d&&o()},m=function(){clearTimeout(f),f=setTimeout(l,e)},n=function(f){var k=b.querySelectorAll("[data-echo]"),n=f||{},o=parseInt(n.offset||0);c=parseInt(n.offsetBot||o),d=parseInt(n.offsetTop||o),e=parseInt(n.throttle||250),g=!!n.unload,h=n.placeholder,i=[],j=[];for(var p=0;p=0&&e.left>=0&&e.top<=(window.innerHeight||b.documentElement.clientHeight)+c&&e.top>=-1*d,g=e.bottom>=-1*d&&e.left>=0&&e.bottom<=(window.innerHeight||b.documentElement.clientHeight)+c;return f||g},k=function(){var a,b,c,d=h.length;if(d>0)for(b=0;d>b;b++)c=h[b],c&&j(c)&&(g&&(c.setAttribute("data-echo-placeholder",c.src),i.push(c)),c.src=c.getAttribute("data-echo"),h.splice(b,1),d=h.length,b--);if(a=i.length,a>0)for(b=0;a>b;b++)c=i[b],c&&!j(c)&&(c.src=c.getAttribute("data-echo-placeholder"),i.splice(b,1),a=i.length,b--,h.push(c));0===a&&0===d&&n()},l=function(){clearTimeout(f),f=setTimeout(k,e)},m=function(f){var j=b.querySelectorAll("[data-echo]"),m=f||{},n=parseInt(m.offset||0);c=parseInt(m.offsetBot||n),d=parseInt(m.offsetTop||n),e=parseInt(m.throttle||250),g=!!m.unload,h=[],i=[];for(var o=0;o