playground
/
echo
mirror of https://github.com/toddmotto/echo.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

add the ability to unload images after they have scrolled out of view

pull/39/head
RaphaelEidus 11 years ago
parent
25273437e2
commit
5a87f4867e
3 changed files with 113 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      dist/echo.js
  2. 2
      dist/echo.min.js
  3. 74
      src/echo.js

74
dist/echo.js vendored
Unescape View File

@ -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);
}
clearTimeout(poll);
}
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);
}
}
}
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
};

2
dist/echo.min.js vendored
Unescape View File

@ -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<g.length;k++)f.push(g[k]);h(),b.addEventListener?(a.addEventListener("scroll",i,!1),a.addEventListener("load",i,!1)):(a.attachEvent("onscroll",i),a.attachEvent("onload",i))};return{init:j,render:h}}(this,document);
window.Echo=function(a,b){"use strict";var c,d,e,f,g,h=[],i=[],j=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},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<i.length;m++)h.push(i[m]);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(f)};return{init:m,detach:n,render:k}}(this,document);

74
src/echo.js
Unescape View File

@ -3,15 +3,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
@ -21,7 +27,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;
};
/**
@ -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);
}
clearTimeout(poll);
}
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);
}
}
}
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
};

Write Preview
Loading…
Cancel
Save