IntersectionObserver

gistfile1.txt

/**
 * For accept the lazy loading to images you need just add
 * [data-lazy-src] with a path on image.
*/

export default (window.onload = () => {
	const images = document.querySelectorAll('[data-lazy-src]');
	
	if ('IntersectionObserver' in window) {
		let observer = new IntersectionObserver(
			(entries, observer) => {
				entries.forEach(entry => {
					if (!entry.isIntersecting) return;
					const lazyLink = entry.target.dataset.lazySrc;
					const closestLink = entry.target.closest('a');
					closestLink ? closestLink.classList.add('h-blur-up', 'lazyload') : null;
					entry.target.tagName === 'SOURCE' ? entry.target.srcset = lazyLink : entry.target.src = lazyLink;
					observer.unobserve(entry.target);
				});
			}, {rootMargin: "0px 0px -100px 0px"}
		);
		images.forEach(img => observer.observe(img));
	} else images.forEach(img => {
		img.tagName === 'SOURCE' ? img.srcset = img.dataset.lazySrc : img.src = img.dataset.lazySrc;
	});
});