diff --git a/dist/echo.js b/dist/echo.js index ae82751..cf21afe 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -4,15 +4,21 @@ window.Echo = (function (global, document, undefined) { 'use strict'; /** - * store + * toBeLoaded * @type {Array} */ - var store = []; + var toBeLoaded = []; /** - * offset, throttle, poll vars + * toBeUnloaded + * @type {Array} + */ + var toBeUnloaded = []; + + /** + * offset, offsetTop throttle, poll, unload vars */ - var offset, throttle, poll; + var offset, offsetTop, throttle, poll, unload; /** * _inView @@ -22,7 +28,9 @@ window.Echo = (function (global, document, undefined) { */ var _inView = function (element) { var coords = element.getBoundingClientRect(); - return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + offset); + var topInView = coords.top >= 0 && coords.left >= 0 && coords.top <= (window.innerHeight || document.documentElement.clientHeight) + offset && coords.top >= -1 * offsetTop; + var botInView = coords.bottom >= -1 * offsetTop && coords.left >= 0 && coords.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset; + return topInView || botInView; }; /** @@ -31,24 +39,39 @@ window.Echo = (function (global, document, undefined) { * @private */ var _pollImages = function () { - var length = store.length; - if (length > 0) { - for (var i = 0; i < length; i++) { - var self = store[i]; + var loadingLength = toBeLoaded.length, + unloadingLength, + i, + self; + if (loadingLength > 0) { + for (i = 0; i < loadingLength; i++) { + self = toBeLoaded[i]; if (self && _inView(self)) { self.src = self.getAttribute('data-echo'); - store.splice(i, 1); - length = store.length; + toBeLoaded.splice(i, 1); + loadingLength = toBeLoaded.length; i--; + if(unload) { + toBeUnloaded.push(self); + } } } - } else { - if (document.removeEventListener) { - global.removeEventListener('scroll', _throttle); - } else { - global.detachEvent('onscroll', _throttle); + } + unloadingLength = toBeUnloaded.length; + if (unloadingLength > 0) { + for(i = 0; i < unloadingLength; i++) { + self = toBeUnloaded[i]; + if (self && !_inView(self)) { + self.src = self.getAttribute('data-echo-holder'); + toBeUnloaded.splice(i, 1); + unloadingLength = toBeUnloaded.length; + i--; + toBeLoaded.push(self); + } } - clearTimeout(poll); + } + if(unloadingLength === 0 && loadingLength === 0) { + detach(); } }; @@ -72,10 +95,12 @@ window.Echo = (function (global, document, undefined) { var nodes = document.querySelectorAll('[data-echo]'); var opts = obj || {}; offset = parseInt(opts.offset || 0); + offsetTop = parseInt(opts.offsetTop || offset); throttle = parseInt(opts.throttle || 250); + unload = !!opts.unload; for (var i = 0; i < nodes.length; i++) { - store.push(nodes[i]); + toBeLoaded.push(nodes[i]); } _pollImages(); @@ -90,12 +115,25 @@ window.Echo = (function (global, document, undefined) { }; + /** + * detach remove listeners + */ + var detach = function() { + if (document.removeEventListener) { + global.removeEventListener('scroll', _throttle); + } else { + global.detachEvent('onscroll', _throttle); + } + clearTimeout(poll); + }; + /** * return Public methods * @returns {Object} */ return { init: init, + detach: detach, render: _pollImages }; diff --git a/dist/echo.min.js b/dist/echo.min.js index f736f12..1e0f2c1 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(a){var d=a.getBoundingClientRect();return(d.top>=0&&d.left>=0&&d.top)<=(window.innerHeight||b.documentElement.clientHeight)+c},h=function(){var c=f.length;if(c>0)for(var d=0;c>d;d++){var h=f[d];h&&g(h)&&(h.src=h.getAttribute("data-echo"),f.splice(d,1),c=f.length,d--)}else b.removeEventListener?a.removeEventListener("scroll",i):a.detachEvent("onscroll",i),clearTimeout(e)},i=function(){clearTimeout(e),e=setTimeout(h,d)},j=function(e){var g=b.querySelectorAll("[data-echo]"),j=e||{};c=parseInt(j.offset||0),d=parseInt(j.throttle||250);for(var k=0;k=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)&&(c.src=c.getAttribute("data-echo"),h.splice(b,1),d=h.length,b--,g&&i.push(c));if(a=i.length,a>0)for(b=0;a>b;b++)c=i[b],c&&!j(c)&&(c.src=c.getAttribute("data-echo-holder"),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 i=b.querySelectorAll("[data-echo]"),j=f||{};c=parseInt(j.offset||0),d=parseInt(j.offsetTop||c),e=parseInt(j.throttle||250),g=!!j.unload;for(var m=0;m= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + offset); + var topInView = coords.top >= 0 && coords.left >= 0 && coords.top <= (window.innerHeight || document.documentElement.clientHeight) + offset && coords.top >= -1 * offsetTop; + var botInView = coords.bottom >= -1 * offsetTop && coords.left >= 0 && coords.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset; + return topInView || botInView; }; /** @@ -30,24 +38,39 @@ window.Echo = (function (global, document, undefined) { * @private */ var _pollImages = function () { - var length = store.length; - if (length > 0) { - for (var i = 0; i < length; i++) { - var self = store[i]; + var loadingLength = toBeLoaded.length, + unloadingLength, + i, + self; + if (loadingLength > 0) { + for (i = 0; i < loadingLength; i++) { + self = toBeLoaded[i]; if (self && _inView(self)) { self.src = self.getAttribute('data-echo'); - store.splice(i, 1); - length = store.length; + toBeLoaded.splice(i, 1); + loadingLength = toBeLoaded.length; i--; + if(unload) { + toBeUnloaded.push(self); + } } } - } else { - if (document.removeEventListener) { - global.removeEventListener('scroll', _throttle); - } else { - global.detachEvent('onscroll', _throttle); + } + unloadingLength = toBeUnloaded.length; + if (unloadingLength > 0) { + for(i = 0; i < unloadingLength; i++) { + self = toBeUnloaded[i]; + if (self && !_inView(self)) { + self.src = self.getAttribute('data-echo-holder'); + toBeUnloaded.splice(i, 1); + unloadingLength = toBeUnloaded.length; + i--; + toBeLoaded.push(self); + } } - clearTimeout(poll); + } + if(unloadingLength === 0 && loadingLength === 0) { + detach(); } }; @@ -71,10 +94,12 @@ window.Echo = (function (global, document, undefined) { var nodes = document.querySelectorAll('[data-echo]'); var opts = obj || {}; offset = parseInt(opts.offset || 0); + offsetTop = parseInt(opts.offsetTop || offset); throttle = parseInt(opts.throttle || 250); + unload = !!opts.unload; for (var i = 0; i < nodes.length; i++) { - store.push(nodes[i]); + toBeLoaded.push(nodes[i]); } _pollImages(); @@ -89,12 +114,25 @@ window.Echo = (function (global, document, undefined) { }; + /** + * detach remove listeners + */ + var detach = function() { + if (document.removeEventListener) { + global.removeEventListener('scroll', _throttle); + } else { + global.detachEvent('onscroll', _throttle); + } + clearTimeout(poll); + }; + /** * return Public methods * @returns {Object} */ return { init: init, + detach: detach, render: _pollImages };