Post Top Ad

Your Ad Spot

domingo, 13 de septiembre de 2020

Observador de intersecciones en Javascript

Hoy discutiremos sobre la api Intersection Observer en Javascript con example. Entonces, a partir de ¿por qué necesitamos la  api de Intersection Observer en Javascript?
donde lo aplicaremos? y lo más importante, ¿qué es la  API de Intersection Observer?
entendamos uno por uno.

¿Qué es la API de Intersection Observer?

Intersection Observer observa de forma asincrónica los cambios en el elemento de destino con la ventana gráfica del documento de nivel superior  .
Tendremos un elemento objetivo cada vez que se observará. Siempre que el objetivo alcanza un umbral especificado para  IntersectionObserver, se invoca la devolución de llamada. La devolución de llamada recibe una lista de objetos y el observador. Tendremos un ejemplo completo para la definición anterior.
Quedan otras preguntas como se mencionó anteriormente, explorémoslas también.

¿Por qué necesitamos la  API de Intersection Observer en Javascript?

Como todos sabemos sobre el concepto de carga diferida, para obtener más detalles sobre la carga diferida, consulte este tutorial del desarrollador google  .
El concepto básico de la carga diferida es reducir tanto como la solicitud HTTP del servidor. Cada solicitud de imagen se trata como una solicitud HTTP, por lo que si una página consta de 50 imágenes aproximadamente, entonces constará de al menos 5 solicitudes HTTP, lo que hace que el tiempo de carga del sitio sea lento. y menor interacción del usuario en el sitio.
Por lo tanto, la carga diferida se puede implementar en casos en los que solo las imágenes de la ventana gráfica se cargarán en la página, mientras que el usuario final cargará otras imágenes en el desplazamiento.
El concepto de carga diferida puede ser implementado de varias maneras por los desarrolladores usando javascript y de implementación central usando la    API Intersection Observer.

Problema enfrentado mientras posee el concepto de carga diferida utilizando cálculo a través de javascript -

A continuación se mencionan algunos inconvenientes:
  • Esto puede causar problemas de rendimiento ya que los cálculos se ejecutarán en el hilo principal.
  • El cálculo se realiza cada vez que hay un desplazamiento en la página, lo cual es malo si la imagen está muy por debajo del puerto de visualización.
  • si hay una gran cantidad de imágenes en la página, el cálculo realizado en la imagen puede ser muy costoso.
La carga diferida con  Intersection Observer  sigue los siguientes pasos:
  • Crea un nuevo observador de intersecciones
  • Mire el elemento que queremos cargar de forma diferida para cambios de visibilidad
  • Cuando el elemento esté en la ventana gráfica, cargue el elemento
  • Una vez que el elemento está cargado, deje de mirarlo para ver los cambios de visibilidad.

donde lo aplicaremos?

Podemos aplicar la  API de Intersection Observer en el concepto de carga diferida, por ejemplo.
echemos un vistazo a un ejemplo a continuación
 

Este es solo un ejemplo básico, puede aplicar el concepto en proyectos fácilmente.
Feliz codificación de todos los detalles de la sintaxis aquí Developer MDN .
Hágame saber sus pensamientos y escribiré el mismo código en react y otros observadores como el observador de mutación y el observador de rendimiento en las próximas series con detalles

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas