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

76 lines
2.2 KiB
JavaScript

function createImageLoader(settings) {
var loadImageByUrl = function(target) {
target.addEventListener("load", function() {
target.style.opacity = 1;
});
target.setAttribute("src", target.getAttribute("data-src"));
};
if (!Array.from) {
return function from(arrayLike) {
console.info(arrayLike);
return [].slice.call(arrayLike)
}
}
var imageList = [].slice.call(document.querySelectorAll('img[loader=ready]'));
imageList.forEach(function(element, index) {
element.style.opacity = 0;
element.style.transition = "opacity 0.5s ease-in-out";
loadImageByUrl(element);
});
var lazyloader = createLazyloader();
lazyloader();
function throttle(fn, delay, atleast) {
var timeout = null,
startTime = new Date();
return function() {
var curTime = new Date();
clearTimeout(timeout);
if (curTime - startTime >= atleast) {
fn();
startTime = curTime;
} else {
timeout = setTimeout(fn, delay);
}
}
}
function getOffset(el) {
var box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
};
}
function createLazyloader() {
var lazyImageList = [].slice.call(document.querySelectorAll('img[loader=lazy]'));
lazyImageList.forEach(function(element, index) {
element.style.opacity = 0;
element.style.transition = "opacity 0.5s ease-in-out";
});
return function() {
var seeHeight = window.innerHeight;
var scrollTop =
(document.documentElement && document.documentElement.scrollTop) ||
document.body.scrollTop;
lazyImageList = lazyImageList.filter(function(element, index) {
var offsetTop = getOffset(element).top
var hasVisible = offsetTop < seeHeight + scrollTop;
if (hasVisible) {
loadImageByUrl(element);
}
return !hasVisible;
});
}
}
if (window.addEventListener) {
window.addEventListener('scroll', throttle(lazyloader, 500, 500), false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', throttle(lazyloader, 500, 500));
}
}