¡Buen dia amigos!En este artículo, presentaremos Intersection Observer API, una nueva herramienta poderosa para cargar imágenes diferidas y otros elementos en una página, compatible con todos los navegadores modernos. Podemos usar esta herramienta para controlar la visibilidad de los elementos definiendo la carga preliminar o demorada de nuestro contenido DOM.A medida que la web evoluciona, los navegadores admiten más y más funciones y API nuevas, pero algo aún perjudica a los desarrolladores: la representación DOM. Cuando comenzamos a desarrollar una nueva aplicación, creamos componentes, pensamos en la estructura HTML, diseñamos elementos con CSS, también pensamos en el proceso de representación, cómo se verá nuestra página en general y algunas otras cosas importantes que requieren un manejo cuidadoso y afectar Representación de la aplicación.Esto, a su vez, afecta la forma en que creamos nuestros elementos, cómo se organizará nuestro CSS, qué bibliotecas y marcos se utilizarán en el proyecto, etc. Es por eso que la representación es tan importante para los desarrolladores.Una de las razones de la popularidad de la biblioteca React en la comunidad de desarrolladores es el hecho de que utiliza un DOM virtual. En esencia, esta es una representación virtual del DOM real, que puede controlar como lo desee. Después de todas las actualizaciones, el DOM virtual decide qué cambios deben realizarse en el DOM original y realiza estos cambios de una manera "perfecta"; No es necesario actualizar toda la página al cambiar un elemento. Esta es una de las ventajas más significativas de React sobre otras bibliotecas y marcos. La representación DOM es una tarea costosa (en términos de rendimiento) que React funciona bien sin ningún problema.Algunas bibliotecas y API nos permiten mejorar la representación de elementos de nuestras aplicaciones. Vamos a familiarizarnos con uno de ellos: la API Intersection Observer. Pero primero, descubramos qué es la carga de imágenes "perezosa".¿Cómo funciona la carga diferida de imágenes?
La carga diferida es una de las técnicas para representar el contenido de la página. El concepto de carga "perezosa" es que en lugar de cargar completamente la página, cargamos solo las partes necesarias y posponemos (retrasamos) la carga de las partes restantes hasta que el usuario las necesite.Un ejemplo de descarga "perezosa", de la que probablemente haya oído hablar o que haya encontrado, es el desplazamiento sin fin de la página. Funciona de la siguiente manera: el usuario visita la página, se carga el contenido inicial y solo después de que el usuario desplaza la página hasta el final, se carga la siguiente parte del contenido. En este caso, no es necesario descargar todo el contenido a la vez, lo que facilita enormemente la aplicación.Si una descarga "perezosa" sirve para descargar solo contenido "generado por el usuario", ¿cómo se llama la técnica opuesta? Algunos han oído hablar de carga lenta antes, pero no han escuchado lo contrario. Lo opuesto a la carga "perezosa" es la carga "energética" (otras opciones son impacientes, se mueven rápidamente), cuando todo el contenido se procesa de inmediato.¿Sabes que hay atributos HTML para las imágenes de carga diferida? Para usarlos, simplemente agregue loading = "perezoso" al elemento "img" o "iframe".
Con esta técnica, obtenemos muchas ventajas: cargar solo los recursos necesarios reduce el consumo de memoria y, en última instancia, el tiempo de carga de la página. También evita la representación de código "no reclamado", que optimiza la aplicación para trabajar en condiciones de bajo ancho de banda de red. Sin embargo, hay algunos inconvenientes: esto puede afectar la clasificación de la página por parte de los motores de búsqueda. Además, lleva algún tiempo elegir la biblioteca o API correcta para trabajar.API de observador de intersección
JavaScript se está desarrollando tan rápido que tenemos una nueva API casi todos los años. El objetivo principal de las nuevas API es ayudar a crear aplicaciones y páginas increíbles.Intersection Observer es una API que le permite controlar la visibilidad y la posición de los elementos DOM. La cuestión es que funciona de forma asíncrona, lo que le permite cambiar sin problemas (imperceptiblemente) la visibilidad de los elementos, determinando la carga preliminar o demorada del contenido de nuestro DOM.
Hace unos años, no teníamos una API u otra herramienta para posicionar y rastrear un elemento. Tuvimos que escribir funciones locas y enormes, crear métodos caros (en términos de rendimiento) que crearon más problemas. Usando la API Intersection Observer, podemos hacer cosas interesantes como:- Desplazamiento de página sin fin: cree un desplazamiento sin fin de tablas, listas, contenedores de cuadrícula, etc. Nunca ha sido tan fácil.
- Imágenes: ¿por qué cargar todas las imágenes a la vez, cuando puede usar la descarga "perezosa" y mostrar solo el contenido que el usuario necesita en este momento?
- Monitoreo de elementos: puede monitorear los elementos en la página. Por ejemplo, puede recibir mensajes sobre el cierre de anuncios.
Aquí es donde todo comienza:let myFirstObserver = new IntersectionObserver(callback, options)
Inicializamos el constructor IntersectionObserver y le pasamos dos parámetros. El primer parámetro es una función de devolución de llamada, que se llama en respuesta a la intersección de nuestro elemento con la ventana gráfica (es decir, cuando el elemento va más allá de los límites de la ventana gráfica) o con otro elemento. El parámetro de opciones es un objeto que controla las condiciones para iniciar la función de devolución de llamada. Este objeto tiene los siguientes campos:- root: el elemento primario que sirve como ventana gráfica para el elemento objetivo (para el elemento que estamos observando)
- rootMargin: el margen exterior alrededor del elemento raíz (los valores de este campo son similares a los valores de margen en CSS). Estos valores pueden cambiar para cada lado de la raíz antes de confirmar la intersección.
- umbral: un número o una matriz de números que determina el porcentaje de intersección del elemento de destino con el elemento raíz, en el que se inicia la función de devolución de llamada
Echemos un vistazo al uso de la API Intersection Observer:let options = {
root: document.querySelector('.scroll-list'),
rootMargin: '5px',
threshold: 0.5
}
let myFirstObserver = new IntersectionObserver(elements => { elements.forEach(element => console.log('element', element)) }, options)
Para comenzar a "monitorear" un elemento, debe determinar el objetivo y llamar al observador utilizando el método "observar", pasando el objetivo como parámetro:let myDivTarget = document.querySelector('.header')
observer.observe(myDivTarget)
Debe recordarse que todos los elementos observados por el observador son rectángulos. Los elementos de forma irregular encajan en el rectángulo más pequeño.¿Qué pasa con el soporte del navegador? Intersection Observer API es compatible con todos los navegadores modernos como Chrome, Edge, Firefox y Opera.
Si va a trabajar con una gran cantidad de datos, por ejemplo, con una tabla que contiene mucha información, la API de Intersection Observer será extremadamente útil para usted.Una de las ventajas de esta API es que para resolver estos problemas ya no necesita usar ninguna biblioteca.Conclusión
Estudiamos la API de Intersection Observer y su uso para la carga diferida, observando la posición de los elementos DOM, etc. Los navegadores admiten cada vez más API que reducen el tiempo de representación de la página, principalmente para usuarios con una conexión lenta, reducen el tamaño del proyecto y muestran solo contenido relevante.De un traductor: el artículo me pareció insuficientemente informativo, así que aquí hay enlaces a literatura adicional:Gracias por su atención.