Image lazy loader
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

57 lines
1.4 KiB

11 years ago
/*!
* Echo v1.4.0
* Lazy-loading with data-* attributes, offsets and throttle options
11 years ago
* Project: https://github.com/toddmotto/echo
11 years ago
* by Todd Motto: http://toddmotto.com
* Copyright. MIT licensed.
11 years ago
*/
11 years ago
window.Echo = (function (window, document, undefined) {
11 years ago
'use strict';
var store = [], offset, throttle, poll;
var _inView = function (el) {
var coords = el.getBoundingClientRect();
return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
11 years ago
};
11 years ago
var _pollImages = function () {
for (var i = store.length; i--;) {
11 years ago
var self = store[i];
if (_inView(self)) {
self.src = self.getAttribute('data-echo');
store.splice(i, 1);
11 years ago
}
}
};
var _throttle = function () {
clearTimeout(poll);
poll = setTimeout(_pollImages, throttle);
};
var init = function (obj) {
var nodes = document.querySelectorAll('[data-echo]');
var opts = obj || {};
offset = opts.offset || 0;
throttle = opts.throttle || 250;
for (var i = 0; i < nodes.length; i++) {
store.push(nodes[i]);
}
if (document.addEventListener) {
window.addEventListener('scroll', _throttle, false);
} else {
window.attachEvent('onscroll', _throttle);
}
11 years ago
};
11 years ago
return {
init: init,
render: _throttle
11 years ago
};
})(window, document);