Crear una carga diferida de imágenes en JavaScript sin utilizar librerías puede ser un poco complicado, pero se puede lograr con un poco de código personalizado. Aquí hay un ejemplo básico de cómo hacerlo:
Crear carga diferida
Agrega una clase a todas las imágenes que quieres que se carguen diferidamente. Por ejemplo, puedes usar la clase «lazy-load«.
<img src="placeholder.jpg" data-src="image.jpg" class="lazy-load" />
Crea una función en JavaScript para cargar las imágenes diferidamente.
function lazyLoad() {
const lazyImages = document.querySelectorAll('.lazy-load');
lazyImages.forEach(image => {
if (image.getBoundingClientRect().top <= window.innerHeight && image.getBoundingClientRect().bottom >= 0) {
image.src = image.dataset.src;
image.classList.remove('lazy-load');
}
});
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('load', lazyLoad);
La función lazyLoad () selecciona todas las imágenes con la clase «lazy-load«. Luego, comprueba si la imagen está en el área visible del navegador utilizando getBoundingClientRect(). Si la imagen está visible, cambia la URL de la imagen a la ruta de la imagen real almacenada en el atributo «data-src«. Finalmente, elimina la clase «lazy-load» para que la imagen no se vuelva a cargar.
Agrega un evento scroll y load para activar la función de carga diferida.
window.addEventListener('scroll', lazyLoad);
window.addEventListener('load', lazyLoad);
La carga diferida de imágenes puede mejorar significativamente el tiempo de carga de una página web. Sin embargo, debes tener en cuenta que esta técnica puede no ser necesaria en todos los casos y que puede haber situaciones en las que debas cargar las imágenes de inmediato para una mejor experiencia del usuario.
Además, ten en cuenta que si tienes muchas imágenes en tu página, la carga diferida puede ser un poco pesada en términos de rendimiento, ya que la función lazyLoad() se ejecutará cada vez que el usuario se desplace por la página. Por lo tanto, es importante optimizar el código y evaluar si la carga diferida realmente mejora el rendimiento de tu sitio web.
También puedes mejorar la técnica de carga diferida de imágenes utilizando otras estrategias, como cargar solo las imágenes que se encuentran por encima del pliegue (above-the-fold), utilizar un placeholder de carga más ligero, o incluso utilizar librerías especializadas en la carga diferida de imágenes, como LazyLoad o lozad.js.
En resumen, la carga diferida de imágenes es una técnica útil para mejorar el tiempo de carga de una página web, pero debes utilizarla con precaución y evaluar si realmente es necesaria para tu sitio web en particular. Con un poco de código personalizado, puedes crear tu propia solución de carga diferida de imágenes en JavaScript sin necesidad de utilizar librerías adicionales.