Browse Source

Merge pull request #47 from raphaeleidus/reduce_filesize

Reduce filesize
pull/48/head
Todd Motto 11 years ago
parent
commit
094ad3de89
  1. 30
      README.md
  2. 127
      dist/echo.js
  3. 2
      dist/echo.min.js
  4. 127
      src/echo.js

30
README.md

@ -34,17 +34,37 @@ 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 `offsetTop` option allows you to specify how far above the viewport you want Echo to _begin_ loading your images.
The `offsetVertical` option allows you to specify how far above and below the viewport you want Echo to _begin_ loading your images.
#### offsetBot
#### offsetHorizontal
Type: `Number|String` Default: `offset`'s value
The `offsetBot` option allows you to specify how far below the viewport you want Echo to _begin_ loading your images.
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.
#### offsetBottom
Type: `Number|String` Default: `offsetVertical`'s value
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
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`

127
dist/echo.js vendored

@ -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}
@ -22,9 +10,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 +20,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);
};
/**
@ -45,41 +31,36 @@ window.Echo = (function (global, document, undefined) {
* @private
*/
var _pollImages = function () {
var loadingLength = toBeLoaded.length,
unloadingLength,
var src,
i,
self;
if (loadingLength > 0) {
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');
callback(self, 'load');
toBeLoaded.splice(i, 1);
loadingLength = toBeLoaded.length;
i--;
elem,
view,
nodes = document.querySelectorAll('img[data-echo]'),
length = nodes.length;
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
};
for(i=0; i<length; i++) {
elem = nodes[i];
if(_inView(elem, view)) {
if(unload) {
elem.setAttribute('data-echo-placeholder', elem.src);
}
}
}
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-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();
}
};
@ -95,32 +76,38 @@ 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.offsetBottom]
* @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);
throttle = parseInt(opts.throttle || 250);
unload = !!opts.unload;
callback = opts.callback || callback;
var init = function (opts) {
toBeLoaded = [];
toBeUnloaded = [];
opts = opts || {};
var offsetAll = opts.offset || 0;
var offsetVertical = opts.offsetVertical || offsetAll;
var offsetHorizontal = opts.offsetHorizontal || offsetAll;
for (var i = 0; i < nodes.length; i++) {
toBeLoaded.push(nodes[i]);
function optionToInt(opt, fallback) {
return parseInt(opt || fallback, 10);
}
offset = {
t: optionToInt(opts.offsetTop, offsetVertical),
b: optionToInt(opts.offsetBottom, offsetVertical),
l: optionToInt(opts.offsetLeft, offsetHorizontal),
r: optionToInt(opts.offsetRight, offsetHorizontal)
};
throttle = optionToInt(opts.throttle, 250);
unload = !!opts.unload;
callback = opts.callback || callback;
_pollImages();
if (document.addEventListener) {

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=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);

127
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}
@ -21,9 +9,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 +19,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);
};
/**
@ -44,41 +30,36 @@ window.Echo = (function (global, document, undefined) {
* @private
*/
var _pollImages = function () {
var loadingLength = toBeLoaded.length,
unloadingLength,
var src,
i,
self;
if (loadingLength > 0) {
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');
callback(self, 'load');
toBeLoaded.splice(i, 1);
loadingLength = toBeLoaded.length;
i--;
elem,
view,
nodes = document.querySelectorAll('img[data-echo]'),
length = nodes.length;
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
};
for(i=0; i<length; i++) {
elem = nodes[i];
if(_inView(elem, view)) {
if(unload) {
elem.setAttribute('data-echo-placeholder', elem.src);
}
}
}
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-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();
}
};
@ -94,32 +75,38 @@ 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.offsetBottom]
* @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('img[data-echo]');
var opts = obj || {};
var offset = parseInt(opts.offset || 0);
offsetBot = parseInt(opts.offsetBot || offset);
offsetTop = parseInt(opts.offsetTop || offset);
throttle = parseInt(opts.throttle || 250);
unload = !!opts.unload;
callback = opts.callback || callback;
var init = function (opts) {
toBeLoaded = [];
toBeUnloaded = [];
opts = opts || {};
var offsetAll = opts.offset || 0;
var offsetVertical = opts.offsetVertical || offsetAll;
var offsetHorizontal = opts.offsetHorizontal || offsetAll;
for (var i = 0; i < nodes.length; i++) {
toBeLoaded.push(nodes[i]);
function optionToInt(opt, fallback) {
return parseInt(opt || fallback, 10);
}
offset = {
t: optionToInt(opts.offsetTop, offsetVertical),
b: optionToInt(opts.offsetBottom, offsetVertical),
l: optionToInt(opts.offsetLeft, offsetHorizontal),
r: optionToInt(opts.offsetRight, offsetHorizontal)
};
throttle = optionToInt(opts.throttle, 250);
unload = !!opts.unload;
callback = opts.callback || callback;
_pollImages();
if (document.addEventListener) {

Loading…
Cancel
Save