From e895d36b40499c78994f2cc26386fbb9be187532 Mon Sep 17 00:00:00 2001 From: Raphael Eidus Date: Sat, 10 May 2014 19:50:23 -0400 Subject: [PATCH] In viewport left, right, top and bottom #45 --- dist/echo.js | 62 +++++++++++++++++++++++++++++------------------- dist/echo.min.js | 2 +- src/echo.js | 58 +++++++++++++++++++++++++++----------------- 3 files changed, 75 insertions(+), 47 deletions(-) diff --git a/dist/echo.js b/dist/echo.js index 2268e90..423dc94 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -22,9 +22,9 @@ window.Echo = (function (global, document, undefined) { var callback = function(){}; /** - * offsetBot, offsetTop throttle, poll, unload vars + * offset, throttle, poll, unload vars */ - var offsetBot, offsetTop, throttle, poll, unload; + var offset, throttle, poll, unload; /** * _inView @@ -32,11 +32,9 @@ window.Echo = (function (global, document, undefined) { * @param {Element} element Image element * @returns {Boolean} Is element in viewport */ - var _inView = function (element) { - var coords = element.getBoundingClientRect(); - var topInView = coords.top >= 0 && coords.left >= 0 && coords.top <= (window.innerHeight || document.documentElement.clientHeight) + offsetBot && coords.top >= -1 * offsetTop; - var botInView = coords.bottom >= -1 * offsetTop && coords.left >= 0 && coords.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offsetBot; - return topInView || botInView; + var _inView = function (element, view) { + var box = element.getBoundingClientRect(); + return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); }; /** @@ -48,11 +46,18 @@ window.Echo = (function (global, document, undefined) { var loadingLength = toBeLoaded.length, unloadingLength, i, - self; + self, + view; + view = { + l: 0 - offset.l, + t: 0 - offset.t, + b: (window.innerHeight || document.documentElement.clientHeight) + offset.b, + r: (window.innerWidth || document.documentElement.clientWidth) + offset.r + }; if (loadingLength > 0) { for (i = 0; i < loadingLength; i++) { self = toBeLoaded[i]; - if (self && _inView(self)) { + if (self && _inView(self, view)) { if(unload) { self.setAttribute('data-echo-placeholder', self.src); toBeUnloaded.push(self); @@ -69,7 +74,7 @@ window.Echo = (function (global, document, undefined) { if (unloadingLength > 0) { for(i = 0; i < unloadingLength; i++) { self = toBeUnloaded[i]; - if (self && !_inView(self)) { + if (self && !_inView(self, view)) { self.src = self.getAttribute('data-echo-placeholder'); callback(self, 'unload'); toBeUnloaded.splice(i, 1); @@ -95,21 +100,30 @@ window.Echo = (function (global, document, undefined) { /** * init Module init function - * @param {Object} [obj] Passed in Object with options - * @param {Number|String} [obj.throttle] - * @param {Number|String} [obj.offset] - * @param {Number|String} [obj.offsetBot] - * @param {Number|String} [obj.offsetTop] - * @param {Boolean} [obj.unload] - * @param {Function} [obj.callback] + * @param {Object} [opts] Passed in Object with options + * @param {Number|String} [opts.throttle] + * @param {Number|String} [opts.offset] + * @param {Number|String} [opts.offsetBot] + * @param {Number|String} [opts.offsetTop] + * @param {Number|String} [opts.offsetLeft] + * @param {Number|String} [opts.offsetRight] + * @param {Boolean} [opts.unload] + * @param {Function} [opts.callback] */ - var init = function (obj) { - - var nodes = document.querySelectorAll('[data-echo]'); - var opts = obj || {}; - var offset = parseInt(opts.offset || 0); - offsetBot = parseInt(opts.offsetBot || offset); - offsetTop = parseInt(opts.offsetTop || offset); + var init = function (opts) { + + var nodes = document.querySelectorAll('img[data-echo]'); + opts = opts || {}; + var offsetAll = opts.offset || 0; + var offsetVertical = opts.offsetVertical || offsetAll; + var offsetHorizontal = opts.offsetHorizontal || offsetAll; + + offset = { + t: parseInt(opts.offsetBot || offsetVertical), + b: parseInt(opts.offsetTop || offsetVertical), + l: parseInt(opts.offsetLeft || offsetHorizontal), + r: parseInt(opts.offsetRight || offsetHorizontal) + }; throttle = parseInt(opts.throttle || 250); unload = !!opts.unload; callback = opts.callback || callback; diff --git a/dist/echo.min.js b/dist/echo.min.js index 0fcd17e..848670f 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=function(){},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=h.length;if(d>0)for(b=0;d>b;b++)c=h[b],c&&k(c)&&(g&&(c.setAttribute("data-echo-placeholder",c.src),i.push(c)),c.src=c.getAttribute("data-echo"),j(c,"load"),h.splice(b,1),d=h.length,b--);if(a=i.length,a>0)for(b=0;a>b;b++)c=i[b],c&&!k(c)&&(c.src=c.getAttribute("data-echo-placeholder"),j(c,"unload"),i.splice(b,1),a=i.length,b--,h.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,j=n.callback||j,h=[],i=[];for(var p=0;p=b.l&&c.bottom>=b.t&&c.left<=b.r&&c.top<=b.b},k=function(){var a,d,e,k,l=g.length;if(k={l:0-c.l,t:0-c.t,b:(window.innerHeight||b.documentElement.clientHeight)+c.b,r:(window.innerWidth||b.documentElement.clientWidth)+c.r},l>0)for(d=0;l>d;d++)e=g[d],e&&j(e,k)&&(f&&(e.setAttribute("data-echo-placeholder",e.src),h.push(e)),e.src=e.getAttribute("data-echo"),i(e,"load"),g.splice(d,1),l=g.length,d--);if(a=h.length,a>0)for(d=0;a>d;d++)e=h[d],e&&!j(e,k)&&(e.src=e.getAttribute("data-echo-placeholder"),i(e,"unload"),h.splice(d,1),a=h.length,d--,g.push(e));0===a&&0===l&&n()},l=function(){clearTimeout(e),e=setTimeout(k,d)},m=function(e){var j=b.querySelectorAll("img[data-echo]");e=e||{};var m=e.offset||0,n=e.offsetVertical||m,o=e.offsetHorizontal||m;c={t:parseInt(e.offsetBot||n),b:parseInt(e.offsetTop||n),l:parseInt(e.offsetLeft||o),r:parseInt(e.offsetRight||o)},d=parseInt(e.throttle||250),f=!!e.unload,i=e.callback||i,g=[],h=[];for(var p=0;p= 0 && coords.left >= 0 && coords.top <= (window.innerHeight || document.documentElement.clientHeight) + offsetBot && coords.top >= -1 * offsetTop; - var botInView = coords.bottom >= -1 * offsetTop && coords.left >= 0 && coords.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offsetBot; - return topInView || botInView; + var _inView = function (element, view) { + var box = element.getBoundingClientRect(); + return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); }; /** @@ -47,11 +45,18 @@ window.Echo = (function (global, document, undefined) { var loadingLength = toBeLoaded.length, unloadingLength, i, - self; + self, + view; + view = { + l: 0 - offset.l, + t: 0 - offset.t, + b: (window.innerHeight || document.documentElement.clientHeight) + offset.b, + r: (window.innerWidth || document.documentElement.clientWidth) + offset.r + }; if (loadingLength > 0) { for (i = 0; i < loadingLength; i++) { self = toBeLoaded[i]; - if (self && _inView(self)) { + if (self && _inView(self, view)) { if(unload) { self.setAttribute('data-echo-placeholder', self.src); toBeUnloaded.push(self); @@ -68,7 +73,7 @@ window.Echo = (function (global, document, undefined) { if (unloadingLength > 0) { for(i = 0; i < unloadingLength; i++) { self = toBeUnloaded[i]; - if (self && !_inView(self)) { + if (self && !_inView(self, view)) { self.src = self.getAttribute('data-echo-placeholder'); callback(self, 'unload'); toBeUnloaded.splice(i, 1); @@ -94,21 +99,30 @@ window.Echo = (function (global, document, undefined) { /** * init Module init function - * @param {Object} [obj] Passed in Object with options - * @param {Number|String} [obj.throttle] - * @param {Number|String} [obj.offset] - * @param {Number|String} [obj.offsetBot] - * @param {Number|String} [obj.offsetTop] - * @param {Boolean} [obj.unload] - * @param {Function} [obj.callback] + * @param {Object} [opts] Passed in Object with options + * @param {Number|String} [opts.throttle] + * @param {Number|String} [opts.offset] + * @param {Number|String} [opts.offsetBot] + * @param {Number|String} [opts.offsetTop] + * @param {Number|String} [opts.offsetLeft] + * @param {Number|String} [opts.offsetRight] + * @param {Boolean} [opts.unload] + * @param {Function} [opts.callback] */ - var init = function (obj) { + var init = function (opts) { var nodes = document.querySelectorAll('img[data-echo]'); - var opts = obj || {}; - var offset = parseInt(opts.offset || 0); - offsetBot = parseInt(opts.offsetBot || offset); - offsetTop = parseInt(opts.offsetTop || offset); + opts = opts || {}; + var offsetAll = opts.offset || 0; + var offsetVertical = opts.offsetVertical || offsetAll; + var offsetHorizontal = opts.offsetHorizontal || offsetAll; + + offset = { + t: parseInt(opts.offsetBot || offsetVertical), + b: parseInt(opts.offsetTop || offsetVertical), + l: parseInt(opts.offsetLeft || offsetHorizontal), + r: parseInt(opts.offsetRight || offsetHorizontal) + }; throttle = parseInt(opts.throttle || 250); unload = !!opts.unload; callback = opts.callback || callback;