Cursos Empresas Blog Live Conf Eventos Precios

0:0014:21

Intersection Observer

Curso de Manipulación del DOM

Clase 23 / 29

Ver clases

Intersection Observer

Curso de Manipulación del DOM

Clase 23 de 29

Clase 23 / 29

Intersection Observer

Curso de Manipulación del DOM

Clase 23 / 29

Ver clases

William Fernando Cañas Salas

Hace 6 años

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

Hace 5 años

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

Santiago Reynoso Dunjo

Hace 5 años

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);
})

Comentarios (52)52 comentarios

Jimmy Buriticá Londoño

Edgar Lopez Arroyo

Muy claro 👍

Eduardo Rodriguez

Excelente imagen, gracias

Carlos Eduardo Gomez García

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

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)

Luis Alejandro Vera Hernandez

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

Max Andy Diaz Neyra

Hace 4 años

El legendario Braco si mal no recuerdo

Rohny Mantilla

Un super aporte!! 👍🏼

Santiago López Daza

La dislexia es interesting 👀

Arturo Mauricio Terceros Beltrán

gracias dislexia 😂🤣

Juan Diego Loaiza Martinez

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

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

Gracias por compartir tus apuntes

Luis Miguel Aponte Rayo

Hace 3 años

Gracias bro!

Alexis Steven Valderrama

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.

Jonathan 🦑 Alvarez

Profesor

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

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

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);
}

Jairo Alexander Chocontá

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

Gutierrez Diego

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

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

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

en honor de la organizacion jeje

Bryan Figueroa

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

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

Que buen curso <3

Cristhian Franco

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

Gracias dislexia!! JAJAJA

Yohesky Pimentel

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.

Andrés Castellanos

¿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.

Intersection Observer

Intersection Observer

Intersection Observer

Progreso del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

Librerías relacionadas

Conclusiones

Intersection Observer

Intersection Observer

Comentarios

Comentarios