Skip to content

Lazy Load

Jump to bottom
Sempi edited this page Jul 12, 2023 · 9 revisions

¿ Que es ?

Una técnica de optimización utilizada en desarrollo web, también conocido por carga perezosa o carga diferida.

¿Cómo funciona?

En lugar de cargar todos los elementos de una página de una vez, retrasa la carga de ciertos elemento, hasta que el usuario no los necesite. Reduce la cantidad de datos que se deben cargar inicialmente, resulta en tiempos de carga más rápidos y una mejor experiencia de usuario.

¿ Cuando puede ser útil ?

  1. Imágenes grandes o numerosas: Si se tiene muchas imágenes o imágenes de alta resolución, solo se cargarán aquellas que son visibles en la ventana del navegador.
  2. Vídeos incrustados: Son recursos pesados, solo se cargarán cuando el usuario los reproduzca o se acerque a la sección de la página que los contiene.
  3. Scripts y widgets externos: Si se utiliza scripts o widgets externos en tu sitio web, como integraciones de redes sociales o contenido dinámico, retrasará su carga hasta que el usuario los necesite o los visualice, reduciendo así el impacto en el rendimiento.
  4. Contenido dinámico: A medida que el usuario se desplaza por la página, como noticias o publicaciones en redes sociales
  5. Elementos en páginas largas: con mucho contenido, a medida que el usuario se desplaza por la página.

Configuración y personalización

  • Definición de los puntos de activación

Desplazamiento de la página Clic o interacción del usuario

  • Ajuste de los tiempos de carga y umbrales de visibilidad

Retraso de carga Umbrales de visibilidad

  • Opciones adicionales

Efectos de transición Priorización de carga Manejo de errores de carga

Guía de referencia

Atributos, métodos y eventos comúnmente utilizados:

Atributos:

data-src: especificar la URL o ruta que se cargara perezosamente.

Ej: data-src="imagen.jpg

data-srcset: proporciona una lista de imágenes de diferentes tamaños para la carga perezosa según la resolución de pantalla.

Ej: data-srcset="imagen_small.jpg 320w, imagen_medium.jpg 640w, imagen_large.jpg 1024w"

data-background-image: como fondo de un elemento, como un contenedor o una sección.

Ej: data-background-image="imagen.jpg

data-placeholder: especificar una imagen en miniatura o un ícono de carga como marcador de posición hasta que se cargue la imagen final.

Ej: data-placeholder="placeholder.jpg

Métodos y eventos:

Intersection Observer API: proporciona una forma eficiente de observar cambios en la intersección de un elemento con el área visible del navegador. Algunos métodos y eventos relacionados son:

  • new IntersectionObserver(callback, options): Crea una nueva instancia del observador de intersección, callback es la función que se ejecuta cuando ocurre una intersección y alguna opción.

  • observe(target): Agrega un elemento específico al observador para que se controle su intersección.

  • unobserve(target): Deja de observar un elemento específico y deja de controlar su intersección.

IntersectionObserverEntry: Objeto que representa una entrada de intersección y contiene información sobre el elemento observado y su estado de intersección.

Eventos del navegador:

  • scroll: Se dispara cuando el usuario desplaza la página. Puede utilizarse para activar la carga perezosa al alcanzar ciertos puntos.

  • resize: Se dispara cuando cambia el tamaño de la ventana del navegador. Puede ser útil para volver a evaluar la visibilidad de los elementos.

  • DOMContentLoaded: Se dispara cuando el documento HTML ha sido completamente cargado y analizado.

Enlace de documentación oficial Lazy Load con Angular

Paso a paso de lazy load en Angular

Clone this wiki locally