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

fix issue #83 (Image Inside a Scrollable div Would not be Loaded)

pull/84/head
ethonchan 10 years ago
parent
69dc18257c
commit
f165561c2a
1 changed files with 117 additions and 116 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. 231
      src/echo.js

231
src/echo.js
Unescape View File

@ -1,134 +1,135 @@
(function() {
'use strict';
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(function() {
return factory(root);
});
} else if (typeof exports === 'object') {
module.exports = factory;
} else {
root.echo = factory(root);
}
})(this, function (root) {
var echo = {};
var root = {};
'use strict';
var callback = function () {
};
var echo = {};
var offset, poll, delay, useDebounce, unload;
var callback = function () {};
var isHidden = function (element) {
return (element.offsetParent === null);
};
var offset, poll, delay, useDebounce, unload;
var inView = function (element, view) {
if (isHidden(element)) {
return false;
}
var isHidden = function (element) {
return (element.offsetParent === null);
};
var box = element.getBoundingClientRect();
return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
};
var inView = function (element, view) {
if (isHidden(element)) {
return false;
}
var debounceOrThrottle = function () {
if (!useDebounce && !!poll) {
return;
}
clearTimeout(poll);
poll = setTimeout(function () {
echo.render();
poll = null;
}, delay);
var box = element.getBoundingClientRect();
return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
};
var debounceOrThrottle = function () {
if(!useDebounce && !!poll) {
return;
}
clearTimeout(poll);
poll = setTimeout(function(){
echo.render();
poll = null;
}, delay);
};
echo.init = function (opts) {
opts = opts || {};
root = opts.viewport || this || (0,eval)('this');
var offsetAll = opts.offset || 0;
var offsetVertical = opts.offsetVertical || offsetAll;
var offsetHorizontal = opts.offsetHorizontal || offsetAll;
var optionToInt = function (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)
};
delay = optionToInt(opts.throttle, 250);
useDebounce = opts.debounce !== false;
unload = !!opts.unload;
callback = opts.callback || callback;
echo.render();
if (document.addEventListener) {
root.addEventListener('scroll', debounceOrThrottle, false);
root.addEventListener('load', debounceOrThrottle, false);
} else {
root.attachEvent('onscroll', debounceOrThrottle);
root.attachEvent('onload', debounceOrThrottle);
}
};
echo.render = function () {
var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]');
var length = nodes.length;
var src, elem;
var view = {
l: 0 - offset.l,
t: 0 - offset.t,
b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,
r: (root.innerWidth || document.documentElement.clientWidth) + offset.r
};
for (var i = 0; i < length; i++) {
elem = nodes[i];
if (inView(elem, view)) {
echo.init = function (opts) {
opts = opts || {};
root = opts.viewport || this || (0,eval)('this')
var offsetAll = opts.offset || 0;
var offsetVertical = opts.offsetVertical || offsetAll;
var offsetHorizontal = opts.offsetHorizontal || offsetAll;
var optionToInt = function (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)
};
delay = optionToInt(opts.throttle, 250);
useDebounce = opts.debounce !== false;
unload = !!opts.unload;
callback = opts.callback || callback;
echo.render();
if (document.addEventListener) {
root.addEventListener('scroll', debounceOrThrottle, false);
root.addEventListener('load', debounceOrThrottle, false);
} else {
root.attachEvent('onscroll', debounceOrThrottle);
root.attachEvent('onload', debounceOrThrottle);
if (unload) {
elem.setAttribute('data-echo-placeholder', elem.src);
}
};
echo.render = function () {
var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]');
var length = nodes.length;
var src, elem;
var view = {
l: 0 - offset.l,
t: 0 - offset.t,
b: (root.innerHeight || root.clientHeight) + offset.b,
r: (root.innerWidth || root.clientWidth) + offset.r
};
for (var i = 0; i < length; i++) {
elem = nodes[i];
if (inView(elem, view)) {
if (unload) {
elem.setAttribute('data-echo-placeholder', elem.src);
}
if (elem.getAttribute('data-echo-background') !== null) {
elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")";
}
else {
elem.src = elem.getAttribute('data-echo');
}
if (!unload) {
elem.removeAttribute('data-echo');
elem.removeAttribute('data-echo-background');
}
callback(elem, 'load');
}
else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
if (elem.getAttribute('data-echo-background') !== null) {
elem.style.backgroundImage = "url(" + src + ")";
}
else {
elem.src = src;
}
elem.removeAttribute('data-echo-placeholder');
callback(elem, 'unload');
}
if (elem.getAttribute('data-echo-background') !== null) {
elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")";
}
if (!length) {
echo.detach();
else {
elem.src = elem.getAttribute('data-echo');
}
};
echo.detach = function () {
if (document.removeEventListener) {
root.removeEventListener('scroll', debounceOrThrottle);
} else {
root.detachEvent('onscroll', debounceOrThrottle);
if (!unload) {
elem.removeAttribute('data-echo');
elem.removeAttribute('data-echo-background');
}
clearTimeout(poll);
};
if ((typeof module !== "undefined" && module !== null) && module.exports) {
module.exports = echo;
} else if (typeof define === 'function') {
define(function() {
return echo;
});
callback(elem, 'load');
}
else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
if (elem.getAttribute('data-echo-background') !== null) {
elem.style.backgroundImage = "url(" + src + ")";
}
else {
elem.src = src;
}
elem.removeAttribute('data-echo-placeholder');
callback(elem, 'unload');
}
}
if (!length) {
echo.detach();
}
};
echo.detach = function () {
if (document.removeEventListener) {
root.removeEventListener('scroll', debounceOrThrottle);
} else {
root.echo = echo;
root.detachEvent('onscroll', debounceOrThrottle);
}
}());
clearTimeout(poll);
};
return echo;
});

Write Preview
Loading…
Cancel
Save