Haciendo un lazy load de imágenes con IntersectionObserver

En este ejemplo, que es una ampliación de uno anterior que había hecho (Haciendo un defer de las imágenes) utilizaremos la API del navegador llamada IntersectionObserver, esta API está soportada por cerca del 85% de los navegadores, y como aquí no hago discriminación, te enseñare además como hacer que funcione con el 15% restante de los navegadores viejos.

¿Que necesitamos?
1- Poder poner como imagen una que sea base64, es decir, que el src sea algo tipo: data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= en lugar de la ruta de la imagen, ¿esto para que? para cargar una mini imagen transparente y después, con javascript sustituirla por la imagen real.
2- Poder poner un atributo tipo data, por ejemplo data-src, donde pondremos la url real de la imagen.
3- Javascript, para hacer el cambio de la ruta.

Paso 1
Igual que en el artículo anterior, la etiqueta (o todas ellas) de la imagen deberá quedar algo así:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/images/imagen1.jpg" alt="Imagen" width="350" height="224">

function init() {
	var imgDefer = document.getElementsByTagName('img');
	for (var i = 0; i < imgDefer.length; i++) {
		if (imgDefer[i].getAttribute('data-src')) {
			imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
		}
	}
}
window.onload = init;​

if ( "IntersectionObserver" in window ) {
const lazyImages = document.querySelectorAll('[data-src]');

const options = { threshold: 0 };

const imageObserver = new IntersectionObserver(
	(entries, observer) => {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				const image = entry.target;
				image.src = image.dataset.src;
				imageObserver.unobserve(image);
			}
		});
	}, options);

lazyImages.forEach(image => imageObserver.observe(image));
} else {
function init() {
	var imgDefer = document.querySelectorAll('[data-src]');
	for (var i = 0; i < imgDefer.length; i++) {
		if (imgDefer[i].getAttribute('data-src')) {
			imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
		}
	}
}
window.onload = init;
}​