Intersection Observer

Clase 23 de 29 • Curso de Manipulación del DOM

Clase anteriorSiguiente clase

Jimmy Buriticá Londoño

student•

Edgar Lopez Arroyo

student•

Muy claro 👍

Eduardo Rodriguez

student•

Excelente imagen, gracias

Carlos Eduardo Gomez García

teacher•

Con el IntersectionObserver podemos decirle a JavaScript que observe un objeto cuando está dentro de la pantalla (o cuando sale de esta), en el Curso Profesional de JavaScript se habla sobre esto, específicamente en la clase de Intersection Observer, les dejo el link por si quieren profundizar en ello: . https://platzi.com/clases/1642-javascript-profesional/22175-intersectionobserver/ . También les dejo el link de la documentación de esto: . https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API . Y también dejo el código de esta clase :D . Adición del Intersection Observer

Eduardo Diaz

student•

Gracias, ya me estaba confundiendo con el filtro ".filter(IsIntersecting)" porque entendí que IntersectionObserver observaba solo lo que aparecía en la pantalla, entonces si eso era cierto no había necesidad de hacer el filtro para nuevamente decirle que vea solo lo de la pantalla, pero en realidad el IntersectionObserver puede observar todo lo que se ve y lo que no, me quedó claro (Y)

William Fernando Cañas Salas

student•

Hice varios experimentos con la API y creo que vale la pena aclarar algunos puntos de la clase:

Cuando se crea el observer de la forma que lo hace el profesor, se define por defecto un umbral = 0 para ejecutar el callback. Es decir, el observer va a validar si la imagen se ve o no se ve (así sea un poquito). Para este ejercicio está perfecto, pero ese umbral es parametrizable si queremos que se ejecute el callback por ejemplo si la imagen se ve en un 50% o más. Para eso hay que pasar un segundo parámetro (un objeto) llamado option: const observer = new IntersectionObserver(callback, option)
Cuando se ejecuta el callback (que el profesor pasa como arrow function), esta función recibe como parámetro un array que aquí llamamos entries. El profesor dice que en ese array van TODOS los target que el observer está vigilando y no es así. Si hacen la prueba en la consola y en ese callback sólo hacen un console.log(entries), van a ver que siempre imprime un array de 1 posición y esa posición obecede solamente al target que desencadenó el callback (es decir, la imagen que ahora es visible o que dejó de ser visible en la pantalla).
Dado esto, cuando el profesor hace un filter y un forEach dentro del callback, realmente está usando estos métodos sobre un array de 1 posición.
Ese array de 1 posición tiene en esa posición un objeto. Este objeto describe el evento que interceptó el observer. Este objeto tiene dos propiedades muy relevantes aquí: isIntersecting : que si es false indica que ya no está en el viewport y si es true indica que ya es visible en el viewport (aunque sea un poquitico). target: que indica específicamente cuál elemento (cuál imágen) es la que generó la ejecución del callback.
Entonces, ejecutar el filter realmente valida si ese único objeto en el array está o no está en el viewport. Si lo está seguimos...
El forEach accede a ese único objeto (un recorrido bieeen cortico jeje), y con él ejecuta la función que imprime el 'holis' en consola. Bien podría haber impreso la imagen que desencadenó el callback si en vez de llamar la función 'accion' hiciera entries.filter(isIntersecting).forEach(entry => console.log(entry.target))
Finalmente, uno pensaría que el callback del observer se ejecuta sólo cuando se genera el evento que definimos (que la imagen aparezca en el viewport), pero no. El callback se ejecuta siempre que ejecutemos la función observer.observe(target) para cada target más las veces que ese target desencadene el callback después. En el ejercicio del curso no se nota porque el profesor hace un filter, pero si dentro del callback solamente colocan un console.log('hola'), van a ver que cada vez que agregen una imagen se imprime el saludo, así la foto aún no sea visible en el viewport.

Luis E

student•

Muchísimas gracias por tu aporte!! Tus aclaraciones me ayudaron un montón para entender como funciona realmente el intersection observer

Santiago Reynoso Dunjo

student•

Este código puede ser más legible y también puede servir como complemento para tu comentario, gracias.

const observer = new IntersectionObserver((entries) => {
    const entry = entries[0];
    if (entry.isIntersecting) accion(entry);
})

Luis Alejandro Vera Hernandez

student•

Aqui el aporte de un crack del curso Profesional de Js. Creditos a quien corresponda.

Max Andy Diaz Neyra

student•

El legendario Braco si mal no recuerdo

Rohny Mantilla

student•

Un super aporte!! 👍🏼

Santiago López Daza

student•

La dislexia es interesting 👀

Arturo Mauricio Terceros Beltrán

student•

gracias dislexia 😂🤣

Juan Diego Loaiza Martinez

student•

Aquí les comparto un video donde se explica muy bien esta API.

Se realizan varios ejemplos interesantes que pueden ayudar a completar la información de este video

https://youtu.be/CvXHedd3Z7w

Yefri Enmanuel Encarnación Jiménez

student•

El intersection Observer se va a encargar de obeservar un elemento indicado para realizar una acción cuando este sea visible. Para usarlo debemos instaciarlo y después usar sus metodos. -Recibe como parametro un call back, osea una función que va a ser llamada por el intersectionObeserver.

.Observe recibe como parametro el elemento que se va a observar y como función inversa tiene .unObserve que recibe como parametro el elemento que se va a dejar de observar.

**Ejemplos de uso: **

-Como en el curso profesional de JS cuando un video ya no es visible para el usuario pausarlo.

Cuando tenemos un carousel automatico pausarlo cuando el usuario no lo este viendo.
Realizar una acción cuando el usuario pase un elemento X, como mostrar un modal o Alert -Por supuesto el ejemplo de este curso (Hacer Lazy loading), pero no solo con imagenes puede ser con videos, peticiones de datos, e incluso cargar una parte de tu sitio web que consideres que no es principal en tu web, pero incluirla de una en la pagina afectaria la carga de esta arruinando el UX

Andrés Felipe García Rendón

student•

Gracias por compartir tus apuntes

Luis Miguel Aponte Rayo

student•

Gracias bro!

Alexis Steven Valderrama

student•

Me ha costado entender un poco esto:

entries.filter(isIntersecting).forEach(accion);

Lo que creo que esta pasando es que se uso filter ya que este devuelve un array cuando una condición se cumple, en este caso isIntersectiing retorna falso o verdadero. entonces con for each recorremos ese array con las las intersecciones del observador que fueron true, y le hacemos un console.log que muestre que el observador detecto una intersección. Entonces el for Each no se usa si no que solo es por efectos de visualización?

Yefri Enmanuel Encarnación Jiménez

student•

Exacto es tal como dices, .filter para que según la condición que le pasemos este nos retorne un array de valores que cumplieron con esa condición, y a ese array es que le hacemos el forEach.

Jonathan 🦑 Alvarez

teacher•

Hola Alexis!

Es tal cual como lo describes :D

También te puedes ayudar debuggeando con breakpoints o haciendo console.log dentro de isIntersecting y de acción para comparar que ahí allí

Alexis Toro Navarro

student•

Si te da este error Uncaught SyntaxError: Cannot use import statement outside a module debes colorcar

type="module"

En la etiqueta script

Efraín Hernández García

student•

Mil gracias bro!

Max Andy Diaz Neyra

student•

Dejo el codigo de la clase para quien prefiera copiarlo:


const isIntersecting = (entry)=>{
    return entry.isIntersecting // true si esta dentro de la pantalla
}

const accion = (entry)=>{
    const nodo = entry.target;
    console.log('holis');
    observer.unobserve(nodo);
}

const observer = new IntersectionObserver((entries)=>{
    entries.filter(isIntersecting).forEach(accion);
});

export const registerImage = (image) =>{
    // IntersectactionObservador -> observer(image)
    observer.observe(image);
}

Jairo Alexander Chocontá Bejarano

student•

¡Gracias por compartir!. Me faltaba completar el action.

Gutierrez Diego

student•

Me ha parecido super interesante esta clase aunque debo confesar que debo verla varias veces para entre serla por completo....

Libian María Hernández Gil

student•

Yo me sentí muy perdida... tuve que tomar pausa, ver otras fuentes. Aunque el profesor explica muy bien, siento que aquí faltó más detalle sobre el uso práctico, para comprender su importancia.

Usuario anónimo

user•

Algo interesante que realiza el profesor es cuando hace el import de registerImage lo hace por medio de una exportación nombrada , lo que quiere decir es que al momento de importarla en cualquier otro módulo, se tiene te importar tal y como ha sido definida

Stanley Melgar

student•

Correcto, las diferentes maneras de exportar código en JS pueden verlo en el curso de ECMAScript+, dicha característica se agregó en ES6.

Luis Felipe Medina Rodriguez

student•

en honor de la organizacion jeje

Bryan Figueroa

student•

La verdad es importante seguir con las rutas de nos brinda platzi, gracias que ya antes vi sobre el interction observer en el curso profesional de api rest y en el curso profesional de javascript, al verlo por tercera vez en este curso me sirvio para terminar de comprenderlo completamente

Como consejo te sugiero que siempre mires la documentación de mdn cada que no entiendas algo, es realmente muy util usarla

Brandon Argel Verdeja Domínguez

student•

Intersection Observer

La API Observador de Intersección provee una vía asíncrona para observar cambios en la intersección de un elemento con un elemento ancestro o con el viewport del documento de nivel superior, aquí están las notas en notion, lo más probable es que en los comentarios no se vea muy bien. 😅

const observer = new IntersectionObserver((entries, observer) => {
	// El primer parámetro es un arreglo con datos de los nodos que se están observando
	// * boundingClientRect: Con las propiedades: top, right, bottom, left, width, height, x & y.
	// * intersectionRatio: Número de 0 a 1, representa cuánto se está intersectando
	// * intersectionRect: Las mismas propiedades que boundingClientRect, pero sólo de lectura.
	// * isIntersecting: Booleano que dice si el nodo está dentro del área del observer
	// * isVisible: Bolleano para el intersectionObserver v2 *Necesita opciones extra para funcionar y no es del todo soportado*
	// * rootBounds: Las mismas propiedades de boundingClientRect pero del observer, sólo lectura
	// * target: El nodo al que se está observando
	// * time: Tiempo en milisegundos que se ha estado observando
	console.log(entries);
	// El segundo parámetro es el observer con las opciones que le daremos: root, rootMargin, threshold.
	console.log(observer); 
}, {
	root: nodo, // Si quieres observar un nodo en específico, por defecto null
	rootMargin: "10px", // Hace el área del observador 10 pixeles más grande para todos los lados (Funciona como en CSS)
	threshold: 1, // Número de 0 a 1 que indica cuánto del elemento debe estar en el observer para ser considerado isIntersecting
	// Opciones requeridas para usar isVisible para v2
  trackVisibility: true, // Para activar la visibilidad
  delay: 100, // mínimo 100
);

Chrystian Fabian Lozano Ramirez

student•

Que buen curso <3

Cristhian Franco

student•

Una vez creado el observador recibe una función callback (esta se ejecuta cuando los objetos a observar cumplen con las condiciones establecidas) y opciones que configuran el comportamiento de este.

**- root: ** El elemento que es usado como viewport para comprobar la visibilidad de elemento target. Este debe ser el padre del target a observar, por defecto en la configuración el root será el body o navegador.

- rootMargin: Margen alrededor del elemento root. Este es configurado tal como la propiedad en css (top, right, bottom, left). Nos ayuda a que la función callback se ejecute tomando en cuenta los pixeles del margen.

- threshold: Recibe un array de valores del 0 al 1, estos representan el porcentaje de visibilidad, si queremos que la función callback se ejecute justo cuando el objeto es visible debemos usar 0, si quisiéramos que el callback se ejecute cuando tengamos un 50% de visibilidad usamos 0.5.

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

Fuente: https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API#c%C3%B3mo_se_calcula_la_intersecci%C3%B3n

Sebastian Heredia

student•

Gracias dislexia!! JAJAJA

Yohesky Pimentel

student•

Cual seria la diferencia de hacer el filter asi:

    entries
        .filter(item => isIntersection(item))

A diferencia de como la hace el profesor?

Jonathan 🦑 Alvarez

teacher•

Hola Yohesky! . Desde un punto práctico no hay diferencia, ambas funcionan igual :D . Desde el punto de vista técnico, es innecesario. Pues estas creando una función adicional para pasarle item a isIntersection.

Andrés Castellanos

student•

¿Deberiamos crear solo un observador?

mi implementación

cuando implementé el constructor del intersectionObserver lo hice así:

const observer = new IntersectionObserver((entries)=>{
  const entry = entries.pop();
  if(entry.isIntersecting){
    action(entry);
  }
});

En el curso estamos creando un observador cada vez que creamos una imagen y esta la agregamos a sus targets. Entonces, nunca un observador va a tener más de una entry (imagen / target), por lo que no tiene sentido trabajar con una lista de entries, por fines de aclarar el código mejor trabajar las entries como lo que son una sola. ¿no?

Parece ser que la api está construida de tal manera que uses solo un observador y agreguemos varios nodos target, lo que me lleva a preguntarme: ¿La manera en la que los estamos implementando en el curso es errónea? lo más seguro es que mi intuición esté equivocada. agradezco una respuesta.

Jonathan 🦑 Alvarez

teacher•

Andrés muy buena tu observación! :D

Acabas de aplicar event delegation, se puede tomar mucho más lejos y tener un sólo observer desde el Body para todo lo que necesite observer – pero eso ya es otro nivel, generalmente así lo hacen librerías como React/Vue/Angular por nosotros.

Para el ejemplo no tiene nada de malo crear varios observer por la simple razón que el rendimiento no se afecta por el número de imágenes.

Intersection Observer

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones