Intersection Observer
Clase 23 de 29 • Curso de Manipulación del DOM
Contenido del curso
Jimmy Buriticá Londoño
student•
hace 5 años
Edgar Lopez Arroyo
student•
hace 5 años
Eduardo Rodriguez
student•
hace 5 años
Clase 23 de 29 • Curso de Manipulación del DOM
Contenido del curso
Jimmy Buriticá Londoño
Edgar Lopez Arroyo
Eduardo Rodriguez
Carlos Eduardo Gomez García
Eduardo Diaz
William Fernando Cañas Salas
Luis E
Santiago Reynoso Dunjo
Luis Alejandro Vera Hernandez
Max Andy Diaz Neyra
Rohny Mantilla
Santiago López Daza
Arturo Mauricio Terceros Beltrán
Juan Diego Loaiza Martinez
Yefri Enmanuel Encarnación Jiménez
Andrés Felipe García Rendón
Luis Miguel Aponte Rayo
Alexis Steven Valderrama
Yefri Enmanuel Encarnación Jiménez
Jonathan 🦑 Alvarez
Alexis Toro Navarro
Efraín Hernández García
Max Andy Diaz Neyra
Jairo Alexander Chocontá
Gutierrez Diego
Libian María Hernández Gil
Usuario anónimo
Stanley Melgar
Luis Felipe Medina Rodriguez
Bryan Figueroa
Brandon Argel Verdeja Domínguez
Chrystian Fabian Lozano Ramirez
Cristhian Franco
Sebastian Heredia
Yohesky Pimentel
Jonathan 🦑 Alvarez
Andrés Castellanos
Jonathan 🦑 Alvarez
Muy claro 👍
Excelente imagen, gracias
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
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)
Hice varios experimentos con la API y creo que vale la pena aclarar algunos puntos de la clase:
const observer = new IntersectionObserver(callback, option)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).entries.filter(isIntersecting).forEach(entry => console.log(entry.target))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.Muchísimas gracias por tu aporte!! Tus aclaraciones me ayudaron un montón para entender como funciona realmente el intersection observer
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); })
Aqui el aporte de un crack del curso Profesional de Js. Creditos a quien corresponda.
El legendario Braco si mal no recuerdo
Un super aporte!! 👍🏼
La dislexia es interesting 👀
gracias dislexia 😂🤣
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
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.
**Ejemplos de uso: **
-Como en el curso profesional de JS cuando un video ya no es visible para el usuario pausarlo.
Gracias por compartir tus apuntes
Gracias bro!
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?
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.
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í
Si te da este error Uncaught SyntaxError: Cannot use import statement outside a module debes colorcar
type="module"
En la etiqueta script
Mil gracias bro!
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); }
¡Gracias por compartir!. Me faltaba completar el action.
Me ha parecido super interesante esta clase aunque debo confesar que debo verla varias veces para entre serla por completo....
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.
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
Correcto, las diferentes maneras de exportar código en JS pueden verlo en el curso de ECMAScript+, dicha característica se agregó en ES6.
en honor de la organizacion jeje
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
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 );
Que buen curso <3
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);
Gracias dislexia!! JAJAJA
Cual seria la diferencia de hacer el filter asi:
entries .filter(item => isIntersection(item))
A diferencia de como la hace el profesor?
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.
¿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.
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.