Implementar lazy loading de imágenes con javaScript
En este ejemplo, la función lazyLoadImages se ejecuta tanto al cargar la página como cuando se realiza el evento de scroll. La función verifica si cada imagen está cerca del viewport utilizando getBoundingClientRect(). Si la imagen está cerca del viewport, se carga dinámicamente de manera similar al ejemplo anterior.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading de Imágenes sin IntersectionObserver</title>
<style>
/* Define un tamaño para las imágenes para evitar cambios en el diseño al cargarlas */
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<!-- Imágenes con el atributo loading="lazy" -->
<img src="imagen1.jpg" alt="Imagen 1" loading="lazy" data-src="imagen1.jpg">
<img src="imagen2.jpg" alt="Imagen 2" loading="lazy" data-src="imagen2.jpg">
<img src="imagen3.jpg" alt="Imagen 3" loading="lazy" data-src="imagen3.jpg">
<script>
function lazyLoadImages() {
const lazyImages = document.querySelectorAll('[loading="lazy"]');
lazyImages.forEach(img => {
// Verifica si la imagen está cerca del viewport
const rect = img.getBoundingClientRect();
const inViewport = (
rect.top >= 0 &&
rect.left >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight)
);
if (inViewport) {
// Carga la imagen
img.src = img.dataset.src;
img.loading = 'eager'; // Carga la imagen de inmediato
}
});
}
// Ejecuta lazyLoadImages al cargar la página y al hacer scroll
document.addEventListener('DOMContentLoaded', lazyLoadImages);
window.addEventListener('scroll', lazyLoadImages);
</script>
</body>
</html>Implementación con IntersectionObserver
IntersectionObserver es una API de JavaScript que proporciona una forma eficiente de observar cambios en la intersección de un elemento con el viewport o con otro elemento. Fue diseñada para abordar el rendimiento y la eficiencia de las técnicas tradicionales de detección de visibilidad, especialmente en escenarios donde se necesitaba controlar muchos elementos en una página.La idea principal detrás de IntersectionObserver es permitir a los desarrolladores detectar cuándo un elemento (como una imagen, un anuncio, etc.) se hace visible en la ventana del navegador (viewport) o cuando se cruza con otro elemento en el documento. Esto es útil para implementar técnicas como lazy loading de imágenes, carga de contenido bajo demanda y seguimiento de elementos en una página mientras el usuario hace scroll.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading de Imágenes</title>
<style>
/* Define un tamaño para las imágenes para evitar cambios en el diseño al cargarlas */
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<!-- Imágenes con el atributo loading="lazy" -->
<img src="imagen1.jpg" alt="Imagen 1" loading="lazy">
<img src="imagen2.jpg" alt="Imagen 2" loading="lazy">
<img src="imagen3.jpg" alt="Imagen 3" loading="lazy">
<script>
// Verifica si el navegador soporta IntersectionObserver
if ('IntersectionObserver' in window) {
// Selecciona todas las imágenes con el atributo loading="lazy"
const lazyImages = document.querySelectorAll('[loading="lazy"]');
// Configura el objeto IntersectionObserver
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Carga la imagen cuando entra en el viewport
const lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.loading = 'eager'; // Carga la imagen de inmediato
observer.unobserve(lazyImage); // Deja de observar la imagen una vez cargada
}
});
});
// Observa cada imagen perezosa
lazyImages.forEach(img => {
observer.observe(img);
});
}
</script>
</body>
</html>
Jorge García
Fullstack developer