Presentación del proyecto

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

Clase anteriorSiguiente clase

Jimmy Buriticá Londoño

student•

Eduardo Rodriguez

student•

Muy descriptiva la imagen

Sebastian Heredia

student•

Que excelente imagen, gracias.

Carlos Eduardo Gomez García

teacher•

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

student•

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

student•

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

Efraín Hernández García

student•

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

Anfernee Valera

student•

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

student•

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.

Giselle Desiree Boyer Jimenez

student•

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

student•

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

student•

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

Fredy A. Yomayuza Colorado

student•

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

Luis Lira

student•

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

Cristian Roso

student•

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

student•

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

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

Gonzalo Vidal

student•

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)

Fredy A. Yomayuza Colorado

student•

Como instalo las dependencias en windows..?

Luis Lira

student•

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

Fredy A. Yomayuza Colorado

student•

Gracias Luis

José Luis Quiróz Casas

student•

Maravilloso curso ¡

Carlos Rubén Díaz Gutiérrez

student•

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

Jhonatan Ronaldo

student•

No pude clonar el proyecto final :(

Karen Sanchez

student•

tampoco pude clonar el repositorio me decia permission denied

Carlos S. Aldazosa

student•

Con el intersectionObserver se puede hacer infinite scroll, verdad?

Jonathan Forero

student•

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.

Charles Castillo Rosas

student•

Mis apuntes en Notion💚

Andres Prieto

student•

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

student•

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

student•

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

Karen Sanchez

student•

No pude clonar el repositorio

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

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

Presentación del proyecto

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