Browse Source

In viewport left, right, top and bottom #45

pull/46/head
Raphael Eidus 11 years ago
parent
commit
e895d36b40
  1. 62
      dist/echo.js
  2. 2
      dist/echo.min.js
  3. 58
      src/echo.js

62
dist/echo.js vendored

@ -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;

2
dist/echo.min.js vendored

@ -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<k.length;p++)h.push(k[p]);l(),b.addEventListener?(a.addEventListener("scroll",m,!1),a.addEventListener("load",m,!1)):(a.attachEvent("onscroll",m),a.attachEvent("onload",m))},o=function(){b.removeEventListener?a.removeEventListener("scroll",m):a.detachEvent("onscroll",m),clearTimeout(f)};return{init:n,detach:o,render:l}}(this,document);
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<j.length;p++)g.push(j[p]);k(),b.addEventListener?(a.addEventListener("scroll",l,!1),a.addEventListener("load",l,!1)):(a.attachEvent("onscroll",l),a.attachEvent("onload",l))},n=function(){b.removeEventListener?a.removeEventListener("scroll",l):a.detachEvent("onscroll",l),clearTimeout(e)};return{init:m,detach:n,render:k}}(this,document);

58
src/echo.js

@ -21,9 +21,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
@ -31,11 +31,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);
};
/**
@ -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;

Loading…
Cancel
Save