From e895d36b40499c78994f2cc26386fbb9be187532 Mon Sep 17 00:00:00 2001 From: Raphael Eidus Date: Sat, 10 May 2014 19:50:23 -0400 Subject: [PATCH 1/7] 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; From c3ace88173798e08b017bc0900d2511d2c8e0265 Mon Sep 17 00:00:00 2001 From: Raphael Eidus Date: Sat, 10 May 2014 20:13:53 -0400 Subject: [PATCH 2/7] Add documentation for new options #45 --- README.md | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8ae7b38..10e64df 100644 --- a/README.md +++ b/README.md @@ -34,18 +34,38 @@ The `init()` API takes a few options #### offset Type: `Number|String` Default: `0` -The `offset` option allows you to specify how far below and above the viewport you want Echo to _begin_ loading your images. If you specify `0`, Echo will load your image as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`. +The `offset` option allows you to specify how far below, above, to the left, and to the right of the viewport you want Echo to _begin_ loading your images. If you specify `0`, Echo will load your image as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`. -#### offsetTop +#### offsetVertical +Type: `Number|String` Default: `offset`'s value + +The `offsetVertical` option allows you to specify how far above and below the viewport you want Echo to _begin_ loading your images. + +#### offsetHorizontal Type: `Number|String` Default: `offset`'s value +The `offsetHorizontal` option allows you to specify how far to the left and right of the viewport you want Echo to _begin_ loading your images. + +#### offsetTop +Type: `Number|String` Default: `offsetVertical`'s value + The `offsetTop` option allows you to specify how far above the viewport you want Echo to _begin_ loading your images. #### offsetBot -Type: `Number|String` Default: `offset`'s value +Type: `Number|String` Default: `offsetVertical`'s value The `offsetBot` option allows you to specify how far below the viewport you want Echo to _begin_ loading your images. +#### offsetLeft +Type: `Number|String` Default: `offsetVertical`'s value + +The `offsetLeft` option allows you to specify how far to left of the viewport you want Echo to _begin_ loading your images. + +#### offsetRight +Type: `Number|String` Default: `offsetVertical`'s value + +The `offsetRight` option allows you to specify how far to the right of the viewport you want Echo to _begin_ loading your images. + #### throttle Type: `Number|String` Default: `250` From 68d0db6a13025ce381162dd320972887b6e1a5b5 Mon Sep 17 00:00:00 2001 From: Raphael Eidus Date: Sun, 11 May 2014 13:33:06 -0400 Subject: [PATCH 3/7] safer parseInt --- dist/echo.js | 14 +++++++++----- dist/echo.min.js | 2 +- src/echo.js | 14 +++++++++----- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/dist/echo.js b/dist/echo.js index 423dc94..c49a802 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -118,13 +118,17 @@ window.Echo = (function (global, document, undefined) { var offsetVertical = opts.offsetVertical || offsetAll; var offsetHorizontal = opts.offsetHorizontal || offsetAll; + function optionToInt(opt, fallback) { + return parseInt(opt || fallback, 10); + } + offset = { - t: parseInt(opts.offsetBot || offsetVertical), - b: parseInt(opts.offsetTop || offsetVertical), - l: parseInt(opts.offsetLeft || offsetHorizontal), - r: parseInt(opts.offsetRight || offsetHorizontal) + t: optionToInt(opts.offsetBot, offsetVertical), + b: optionToInt(opts.offsetTop, offsetVertical), + l: optionToInt(opts.offsetLeft, offsetHorizontal), + r: optionToInt(opts.offsetRight, offsetHorizontal) }; - throttle = parseInt(opts.throttle || 250); + throttle = optionToInt(opts.throttle, 250); unload = !!opts.unload; callback = opts.callback || callback; diff --git a/dist/echo.min.js b/dist/echo.min.js index 848670f..8dc7188 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=function(){},j=function(a,b){var c=a.getBoundingClientRect();return c.right>=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=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){function j(a,b){return parseInt(a||b,10)}var m=b.querySelectorAll("img[data-echo]");e=e||{};var n=e.offset||0,o=e.offsetVertical||n,p=e.offsetHorizontal||n;c={t:j(e.offsetBot,o),b:j(e.offsetTop,o),l:j(e.offsetLeft,p),r:j(e.offsetRight,p)},d=j(e.throttle,250),f=!!e.unload,i=e.callback||i,g=[],h=[];for(var q=0;q Date: Sun, 11 May 2014 13:43:06 -0400 Subject: [PATCH 4/7] top to top, bottom to bottom --- dist/echo.js | 4 ++-- dist/echo.min.js | 2 +- src/echo.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dist/echo.js b/dist/echo.js index c49a802..1f284aa 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -123,8 +123,8 @@ window.Echo = (function (global, document, undefined) { } offset = { - t: optionToInt(opts.offsetBot, offsetVertical), - b: optionToInt(opts.offsetTop, offsetVertical), + t: optionToInt(opts.offsetTop, offsetVertical), + b: optionToInt(opts.offsetBot, offsetVertical), l: optionToInt(opts.offsetLeft, offsetHorizontal), r: optionToInt(opts.offsetRight, offsetHorizontal) }; diff --git a/dist/echo.min.js b/dist/echo.min.js index 8dc7188..70035f4 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=function(){},j=function(a,b){var c=a.getBoundingClientRect();return c.right>=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){function j(a,b){return parseInt(a||b,10)}var m=b.querySelectorAll("img[data-echo]");e=e||{};var n=e.offset||0,o=e.offsetVertical||n,p=e.offsetHorizontal||n;c={t:j(e.offsetBot,o),b:j(e.offsetTop,o),l:j(e.offsetLeft,p),r:j(e.offsetRight,p)},d=j(e.throttle,250),f=!!e.unload,i=e.callback||i,g=[],h=[];for(var q=0;q=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){function j(a,b){return parseInt(a||b,10)}var m=b.querySelectorAll("img[data-echo]");e=e||{};var n=e.offset||0,o=e.offsetVertical||n,p=e.offsetHorizontal||n;c={t:j(e.offsetTop,o),b:j(e.offsetBot,o),l:j(e.offsetLeft,p),r:j(e.offsetRight,p)},d=j(e.throttle,250),f=!!e.unload,i=e.callback||i,g=[],h=[];for(var q=0;q Date: Sun, 11 May 2014 17:21:45 -0400 Subject: [PATCH 5/7] change offsetBot to offsetBottom --- README.md | 4 ++-- dist/echo.js | 4 ++-- dist/echo.min.js | 2 +- src/echo.js | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 10e64df..53df7ed 100644 --- a/README.md +++ b/README.md @@ -51,10 +51,10 @@ Type: `Number|String` Default: `offsetVertical`'s value The `offsetTop` option allows you to specify how far above the viewport you want Echo to _begin_ loading your images. -#### offsetBot +#### offsetBottom Type: `Number|String` Default: `offsetVertical`'s value -The `offsetBot` option allows you to specify how far below the viewport you want Echo to _begin_ loading your images. +The `offsetBottom` option allows you to specify how far below the viewport you want Echo to _begin_ loading your images. #### offsetLeft Type: `Number|String` Default: `offsetVertical`'s value diff --git a/dist/echo.js b/dist/echo.js index 1f284aa..a979be7 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -103,7 +103,7 @@ window.Echo = (function (global, document, undefined) { * @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.offsetBottom] * @param {Number|String} [opts.offsetTop] * @param {Number|String} [opts.offsetLeft] * @param {Number|String} [opts.offsetRight] @@ -124,7 +124,7 @@ window.Echo = (function (global, document, undefined) { offset = { t: optionToInt(opts.offsetTop, offsetVertical), - b: optionToInt(opts.offsetBot, offsetVertical), + b: optionToInt(opts.offsetBottom, offsetVertical), l: optionToInt(opts.offsetLeft, offsetHorizontal), r: optionToInt(opts.offsetRight, offsetHorizontal) }; diff --git a/dist/echo.min.js b/dist/echo.min.js index 70035f4..d007381 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=function(){},j=function(a,b){var c=a.getBoundingClientRect();return c.right>=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){function j(a,b){return parseInt(a||b,10)}var m=b.querySelectorAll("img[data-echo]");e=e||{};var n=e.offset||0,o=e.offsetVertical||n,p=e.offsetHorizontal||n;c={t:j(e.offsetTop,o),b:j(e.offsetBot,o),l:j(e.offsetLeft,p),r:j(e.offsetRight,p)},d=j(e.throttle,250),f=!!e.unload,i=e.callback||i,g=[],h=[];for(var q=0;q=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){function j(a,b){return parseInt(a||b,10)}var m=b.querySelectorAll("img[data-echo]");e=e||{};var n=e.offset||0,o=e.offsetVertical||n,p=e.offsetHorizontal||n;c={t:j(e.offsetTop,o),b:j(e.offsetBottom,o),l:j(e.offsetLeft,p),r:j(e.offsetRight,p)},d=j(e.throttle,250),f=!!e.unload,i=e.callback||i,g=[],h=[];for(var q=0;q Date: Sat, 10 May 2014 22:02:41 -0400 Subject: [PATCH 6/7] reduce file size --- dist/echo.js | 69 +++++++++++++----------------------------------- dist/echo.min.js | 2 +- src/echo.js | 69 +++++++++++++----------------------------------- 3 files changed, 39 insertions(+), 101 deletions(-) diff --git a/dist/echo.js b/dist/echo.js index a979be7..3479677 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -3,18 +3,6 @@ window.Echo = (function (global, document, undefined) { 'use strict'; - /** - * toBeLoaded - * @type {Array} - */ - var toBeLoaded = []; - - /** - * toBeUnloaded - * @type {Array} - */ - var toBeUnloaded = []; - /** * callback - initialized to a no-op so that no validations on it's presence need to be made * @type {Function} @@ -43,48 +31,36 @@ window.Echo = (function (global, document, undefined) { * @private */ var _pollImages = function () { - var loadingLength = toBeLoaded.length, - unloadingLength, + var src, + length, i, - self, - view; + elem, + view, + nodes = [].slice.call(document.querySelectorAll('img[data-echo]')); 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, view)) { - if(unload) { - self.setAttribute('data-echo-placeholder', self.src); - toBeUnloaded.push(self); - } - self.src = self.getAttribute('data-echo'); - callback(self, 'load'); - toBeLoaded.splice(i, 1); - loadingLength = toBeLoaded.length; - i--; + for(i=0; i 0) { - for(i = 0; i < unloadingLength; i++) { - self = toBeUnloaded[i]; - if (self && !_inView(self, view)) { - self.src = self.getAttribute('data-echo-placeholder'); - callback(self, 'unload'); - toBeUnloaded.splice(i, 1); - unloadingLength = toBeUnloaded.length; - i--; - toBeLoaded.push(self); + elem.src = elem.getAttribute('data-echo'); + if(!unload) { + elem.removeAttribute('data-echo'); } + callback(elem, 'load'); + } else if(unload && !!(src = elem.getAttribute('data-echo-placeholder'))) { + elem.src = src; + elem.removeAttribute('data-echo-placeholder'); + callback(elem, 'unload'); } } - if(unloadingLength === 0 && loadingLength === 0) { + if(!length) { detach(); } }; @@ -112,7 +88,6 @@ window.Echo = (function (global, document, undefined) { */ var init = function (opts) { - var nodes = document.querySelectorAll('img[data-echo]'); opts = opts || {}; var offsetAll = opts.offset || 0; var offsetVertical = opts.offsetVertical || offsetAll; @@ -132,12 +107,6 @@ window.Echo = (function (global, document, undefined) { unload = !!opts.unload; callback = opts.callback || callback; - toBeLoaded = []; - toBeUnloaded = []; - - for (var i = 0; i < nodes.length; i++) { - toBeLoaded.push(nodes[i]); - } _pollImages(); diff --git a/dist/echo.min.js b/dist/echo.min.js index d007381..725edf0 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=function(){},j=function(a,b){var c=a.getBoundingClientRect();return c.right>=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){function j(a,b){return parseInt(a||b,10)}var m=b.querySelectorAll("img[data-echo]");e=e||{};var n=e.offset||0,o=e.offsetVertical||n,p=e.offsetHorizontal||n;c={t:j(e.offsetTop,o),b:j(e.offsetBottom,o),l:j(e.offsetLeft,p),r:j(e.offsetRight,p)},d=j(e.throttle,250),f=!!e.unload,i=e.callback||i,g=[],h=[];for(var q=0;q=b.l&&c.bottom>=b.t&&c.left<=b.r&&c.top<=b.b},i=function(){var a,d,e,i,j,k=[].slice.call(b.querySelectorAll("img[data-echo]"));for(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},e=0;d>e;e++)i=k[e],h(i,j)?(f&&i.setAttribute("data-echo-placeholder",i.src),i.src=i.getAttribute("data-echo"),f||i.removeAttribute("data-echo"),g(i,"load")):f&&(a=i.getAttribute("data-echo-placeholder"))&&(i.src=a,i.removeAttribute("data-echo-placeholder"),g(i,"unload"));d||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 diff --git a/src/echo.js b/src/echo.js index e69d2c4..2fdda37 100644 --- a/src/echo.js +++ b/src/echo.js @@ -2,18 +2,6 @@ window.Echo = (function (global, document, undefined) { 'use strict'; - /** - * toBeLoaded - * @type {Array} - */ - var toBeLoaded = []; - - /** - * toBeUnloaded - * @type {Array} - */ - var toBeUnloaded = []; - /** * callback - initialized to a no-op so that no validations on it's presence need to be made * @type {Function} @@ -42,48 +30,36 @@ window.Echo = (function (global, document, undefined) { * @private */ var _pollImages = function () { - var loadingLength = toBeLoaded.length, - unloadingLength, + var src, + length, i, - self, - view; + elem, + view, + nodes = [].slice.call(document.querySelectorAll('img[data-echo]')); 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, view)) { - if(unload) { - self.setAttribute('data-echo-placeholder', self.src); - toBeUnloaded.push(self); - } - self.src = self.getAttribute('data-echo'); - callback(self, 'load'); - toBeLoaded.splice(i, 1); - loadingLength = toBeLoaded.length; - i--; + for(i=0; i 0) { - for(i = 0; i < unloadingLength; i++) { - self = toBeUnloaded[i]; - if (self && !_inView(self, view)) { - self.src = self.getAttribute('data-echo-placeholder'); - callback(self, 'unload'); - toBeUnloaded.splice(i, 1); - unloadingLength = toBeUnloaded.length; - i--; - toBeLoaded.push(self); + elem.src = elem.getAttribute('data-echo'); + if(!unload) { + elem.removeAttribute('data-echo'); } + callback(elem, 'load'); + } else if(unload && !!(src = elem.getAttribute('data-echo-placeholder'))) { + elem.src = src; + elem.removeAttribute('data-echo-placeholder'); + callback(elem, 'unload'); } } - if(unloadingLength === 0 && loadingLength === 0) { + if(!length) { detach(); } }; @@ -111,7 +87,6 @@ window.Echo = (function (global, document, undefined) { */ var init = function (opts) { - var nodes = document.querySelectorAll('img[data-echo]'); opts = opts || {}; var offsetAll = opts.offset || 0; var offsetVertical = opts.offsetVertical || offsetAll; @@ -131,12 +106,6 @@ window.Echo = (function (global, document, undefined) { unload = !!opts.unload; callback = opts.callback || callback; - toBeLoaded = []; - toBeUnloaded = []; - - for (var i = 0; i < nodes.length; i++) { - toBeLoaded.push(nodes[i]); - } _pollImages(); From 5cdfa2df3bdb7e15900fe1ec14703d8f36e3cd52 Mon Sep 17 00:00:00 2001 From: Raphael Eidus Date: Sun, 11 May 2014 07:21:06 -0400 Subject: [PATCH 7/7] dont turn it into an array, keep it as a nodeList --- dist/echo.js | 4 ++-- dist/echo.min.js | 2 +- src/echo.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dist/echo.js b/dist/echo.js index 3479677..f4497e5 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -32,11 +32,11 @@ window.Echo = (function (global, document, undefined) { */ var _pollImages = function () { var src, - length, i, elem, view, - nodes = [].slice.call(document.querySelectorAll('img[data-echo]')); + nodes = document.querySelectorAll('img[data-echo]'), + length = nodes.length; view = { l: 0 - offset.l, t: 0 - offset.t, diff --git a/dist/echo.min.js b/dist/echo.min.js index 725edf0..b1c0594 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,k=[].slice.call(b.querySelectorAll("img[data-echo]"));for(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},e=0;d>e;e++)i=k[e],h(i,j)?(f&&i.setAttribute("data-echo-placeholder",i.src),i.src=i.getAttribute("data-echo"),f||i.removeAttribute("data-echo"),g(i,"load")):f&&(a=i.getAttribute("data-echo-placeholder"))&&(i.src=a,i.removeAttribute("data-echo-placeholder"),g(i,"unload"));d||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=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 diff --git a/src/echo.js b/src/echo.js index 2fdda37..c7f4268 100644 --- a/src/echo.js +++ b/src/echo.js @@ -31,11 +31,11 @@ window.Echo = (function (global, document, undefined) { */ var _pollImages = function () { var src, - length, i, elem, view, - nodes = [].slice.call(document.querySelectorAll('img[data-echo]')); + nodes = document.querySelectorAll('img[data-echo]'), + length = nodes.length; view = { l: 0 - offset.l, t: 0 - offset.t,