Lazy Load Images using IntersectionObserver

lazyLoad.js

function imageLazyLoad() {
	const images = Array.from(document.querySelectorAll('img[data-src]'));

	if (images.length) {
		if ('IntersectionObserver' in window) {
			setupIntersectionObserver(images);
		} else {
			loadImages(images);
		}
	}
}

function setupIntersectionObserver(images) {
	const observer = new IntersectionObserver(onIntersection);
	images.forEach(image => observer.observe(image));
}

function onIntersection(entries, observer) {
	entries.forEach((entry) => {
		if (entry.intersectionRatio > 0) {
			observer.unobserve(entry.target);
			loadImage(entry.target);
		}
	});
}

function loadImages(images) {
	images.forEach(loadImage);
}

function loadImage(image) {
	image.setAttribute('src', image.getAttribute('data-src'));

	image.onload = () => {
		image.removeAttribute('data-src');
		image.removeAttribute('data-srcset');
	};
}

export default imageLazyLoad;