Cursos Empresas Blog Live Conf Eventos Precios

0:003:34

Presentación del proyecto

Curso de Manipulación del DOM

Clase 20 de 29

Clase 20 / 29

Carlos S. Aldazosa

Hace 4 años

Con el intersectionObserver se puede hacer infinite scroll, verdad?

Jonathan Forero

Hace 3 años

Sí, el Intersection Observer API puede utilizarse para implementar la funcionalidad de "infinite scroll" (desplazamiento infinito) en una página web. El "infinite scroll" es una técnica que permite cargar más contenido a medida que el usuario se desplaza hacia abajo en una página, sin tener que hacer clic en un botón de carga adicional.

El Intersection Observer API proporciona una forma eficiente de observar los cambios en la visibilidad de un elemento en relación con un contenedor o la ventana del navegador. Esto es especialmente útil para determinar si un elemento se encuentra dentro del área visible del usuario.

Ejemplo básico:

// Crear el observador
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // El elemento es visible, cargar más contenido
      // Aquí puedes realizar una solicitud de carga de contenido adicional
      // y agregarlo al DOM
    }
  });
});

// Seleccionar el elemento que se va a observar
const targetElement = document.querySelector('#scroll-container');

// Observar el elemento
observer.observe(targetElement);

En este ejemplo, se crea un observador utilizando la clase IntersectionObserver. Luego, se selecciona el elemento #scroll-container que deseas observar y se llama al método observe() del observador para comenzar a observar los cambios de visibilidad en ese elemento.

Cada vez que el elemento se vuelve visible, el callback que se pasa al constructor de IntersectionObserver se ejecuta y puedes realizar una solicitud para cargar más contenido en ese momento.

Ten en cuenta que este es solo un ejemplo básico para ilustrar el concepto. En una implementación real, probablemente necesitarías manejar detalles adicionales, como controlar cuándo dejar de cargar más contenido o manejar errores de carga.

Comentarios (28)28 comentarios

Jimmy Buriticá Londoño

Hace 6 años

Eduardo Rodriguez

Muy descriptiva la imagen

Sebastian Heredia

Hace 5 años

Que excelente imagen, gracias.

Carlos Eduardo Gomez García

Es importante mencionar que hoy en día el navegador ya tiene implementada una api nativa en HTML de Lazy Loading: . https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading . Sin embargo, aún no es compatible con todos los navegadores: .

. El motivo de usar Lazy Loading es la optimización de la página, es decir, es mejor que de inicio un usuario cargue pocos recursos de la página, de esta forma se acelera la carga de la misma, porque no tiene que cargar 100 imagenes de golpe, sino que de poquito a poquito va cargando las imágenes y se hace todo más ameno :D

Andrés Felipe García Rendón

Creo que soy fan de Lazy Loading, no sabia que existía pero eso en definitiva creo que optimiza el sitio (?)

Giselle Desiree Boyer Jimenez

Exactamente Andrés, el lazy loading permitirá que la página cargue más rápido.

Efraín Hernández García

Yo sabía que es posible hacer esto con HTML puro, es decir ya sin JavaScript y esa API de Intersection Observer

Anfernee Valera

SI. Ya hay una API nativa de HTML para hacer Lazy loading, lo malo es que aun no está compatible para todos los navegadores 😥

Brandon Argel Verdeja Domínguez

Lazy Loading vs Eager Loading

Para que nuestro proyecto cargue más rápido teniendo en cuenta todo tipo de usuarios (Con una débil señal de internet o con un dispositivo de gama baja) podemos utilizar diferentes técnicas de loading:

Lazy Loading: Es cuando retrasamos la carga de algunos elementos para reducir el tiempo de descarga inicial, y los vamos descargando a medida que el usuario avanza en nuestra página.
Eager Loading: Descarga todo a la vez.

Técnicas de lazy loading:

Nativo: En el caso de las imágenes podemos asignar el atributo loading="lazy"
Intersection Observer: Utilizando esta API podemos detectar cuando uno o varios elementos están cerca o dentro del área visible del viewport.
Scroll listener: Escuchando el evento de scroll, obtener la altura de un o varios elementos y detectar cuando vayan a entrar a la pantalla.

El lazy loading es super útil tanto para apps como páginas web, permitirá que la carga de la página sea mucho más rápida mejorando así la experiencia del usuario.

Daniel David Mármol Rivero

El taller consiste en agregar una nueva API llamada intersection observer y todo lo aprendido anteriormente. El sitio se llamará Lazy loading para agregar imágenes y limpiarlas. En la cónsola podremos ver cuantas imágenes se solicitan y cuantas se han cargada (Solo cuando son visibles en el navegador). Esto es una técnica muy optimizada y avanzada de optimización WEB.

Alexandra Gabriela

Hoy en día 'lazy loading' ya es compatible con Chrome, Firefox, Safari y Edge.

Fredy A. Yomayuza Colorado

al clonar un proyecto en github es necesario estar conectado a nuestra cuenta personal ..?

Luis Lira

No obligatoriamente, si solo haces "git clone" creo que no es necesario que tengas asociada la PC a tu cuenta de GitHub

Cristian Roso

Hola! Recuerda que Git es un software para control de versiones y Github una plataforma para sincronizarlo en la nube. Así que tú puedes clonar un repositorio a tu equipo sin necesidad de iniciar sesión ya que estarás usando Git, no GitHub. Ahora, si le haces push request al mismo repositorio o a uno nuevo en GitHub para tu uso ya es otra historia

Cesar Guevara Cabrera

Aqui se explica con el uso ya directo de un atributo HTML:

https://www.youtube.com/watch?v=Vko5cC4SMSc

Gonzalo Vidal

Esto me recordó a un término similar, el LAZY COMPILING, que se da en navegadores modernos, lo cual es que el contenido de las funciones no son compiladas al inicio de la ejecución del codigo Javascript, sino hasta que son llamadas(invocadas) así es mucho más rápido la carga al no compilar funciones que se tardarán en llamar (como la ejecución de lineas de código cuando se presione un botón) o incluso quizás nunca son disparados estos eventos(ni funciones)

Como instalo las dependencias en windows..?

Se instalan igual en cualquier SO, estando sobre el directorio del proyecto ejecutas npm install, esto busca el archivo package.json e instala todo lo que indica ahí.

Gracias Luis

José Luis Quiróz Casas

Maravilloso curso ¡

Carlos Rubén Díaz Gutiérrez

¡Hey! Esta función la tiene Platzi en la sección de aportes y comentarios. 🙌

Jhonatan Ronaldo

No pude clonar el proyecto final :(

Karen Sanchez

tampoco pude clonar el repositorio me decia permission denied

Charles Castillo Rosas

Mis apuntes en Notion💚

Andres Prieto

Aún recuerdo que esta vaina la vi por primera vez en unos de los cursos de TypeScript, entre estas 2 técnicas la carga se puede hacer semi "infinita" que nunca se ve lo gris pues:

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Kevin Ramirez

Si no les carga la imagen de los zorros, pueden usar esta alternativa https://placekitten.com/

Así adapté el código de utils.js para la nueva API

const minimum = 200;
const maximum = 500;

const random = () => Math.floor(Math.random() * (maximum - minimum)) + minimum;

export const createImageNodes = () => {
  const wrapper = document.createElement("div");
  wrapper.className = "p-4";

  const image = document.createElement("img");
  image.className = "mx-auto rounded-md bg-gray-300";
  const ran = random();
  image.src =
    "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=";
  image.dataset.src = `https://placekitten.com/g/${ran}/${ran}`;
  image.width = 320;

  wrapper.append(image);

  return [wrapper, image];
};

Rodrigo Andre Gutierrez

si cuando intentan conectar su repositorio de github con el del pc la terminal les dice que error: remoto origin ya existe, para desvincular el repositorio local del repositorio remoto de platzi y poder vincularlo al de nosotros usamos:

git remote rm origin

y luego conectamos nuestro repositorio de github o lo que queramos. ejemplo:

git remote add origin https://github.com/nombredeusuario/nombredelrepo.git

No pude clonar el repositorio

Presentación del proyecto

Progreso del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

Librerías relacionadas

Conclusiones