Nuestro propio plugin Lazy Loading

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

Contenido del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

26
Proyectos propuestos
04:17 min

Librerías relacionadas

Conclusiones

29
Conclusiones
01:56 min

Tomar examen

Comentarios

Alejandro Dotor

student•

He visto que el profe es muy rápido cuando escribe código, esto es porque usa los shortcuts que nos da el software, en este caso VS Code.

Les dejo los link para que vean todo lo que se puede hacer solo con el teclado:  MAC 🟦 WIN Espero mejoren su productividad a la hora de escribir código 💪

Sebastián Buitrago

student•

con oprimir ctrl+k y ctrl+s aparecen todos los atajos segun tu SO, en mac obviamente seria con comand, y ademas desde alli los pueden editar

Carlos Eduardo Gomez García

teacher•

Foxes are the bests:3!

. Les estaré dejando el código de este Workshop en mi repositorio uwu: . Workshop 2

José Pablo Jiménez Cucanán

student•

API sumamente útil xD

Juan Cruz

student•

Este link tiene muchas apis para poder trabajar este taller y practicar.

Andrés Felipe García Rendón

student•

gracias por el dato colega!

Luciano Marchese

student•

Muy bueno!

Gabriel Andrés Rondón Barragán

student•

Tengo la sensación de que Jonathan explica muy bien, este curso ha sido bastante enriquecedor.

Sebastian Heredia

student•

Después de seguir por la ruta de desarrollo web, es impresionante como uno puede entender y hacer todo tan fluido donde vamos aprendiendo cosas gradualmente. 😃

Seba Cardoso

student•

Sebastian Heredia

student•

Después de seguir por la ruta de desarrollo web, es impresionante como puede entender y hacer todo tan fluido donde vamos aprendiendo cosas gradualmente. :)

George Báez Beltré

student•

<div id="imagenes" class="pt-10"> <div class="p-4"> <img class="mx-auto" width="320" height="120" src="https://randomfox.ca/images/2.jpg" alt=""> </div>

Para copiar y pegar

Ines Valeria Foglino

student•

Jaja...gracias!!!

Juan Diego Loaiza Martinez

student•

Continuamos :)

Andres Felipe Pinchao Ramirez

student•

Emmet Abrevation

Esto sirve para crear etiquetas en html mucho mas rápido, te dejo un ejemplo con los div y imágenes con las clases ya agregadas .

div.p-4*9>img.mx-auto```

Juan David Moreno Rodriguez

student•

La forma en la que explica Jonathan es increíble 🤩

Oscar Leandro Camacho Vasquez

student•

El enlace de la imagen

https://randomfox.ca/images/2.jpg

Edgar Lopez Arroyo

student•

Usando <figure> para manejar imagenes

<div id="root">
          <figure class="p-4">
            <img class="mx-auto" src="https://randomfox.ca/images/1.jpg" width="200" alt="Zorro Image" />
          </figure>
          <figure class="p-4">
            <img class="mx-auto" src="https://randomfox.ca/images/2.jpg" width="200" alt="Zorro Image" />
          </figure>
        </div>

Maria Tohabanda Duchi

student•

Happy to learn new things. :)

Jacobo Burbano

student•

Use javascript para la implementación desde las imágenes, mas automatizado y manejando la optimización de este lo mejor posible

const divImages = document.getElementById('images')
let foxes = []
for(let i = 1; i < 8; i++){
    const imagenes = document.createElement('img')
    imagenes.setAttribute('src' , `https://randomfox.ca/images/${i}.jpg`)
    imagenes.setAttribute('class', 'mx-auto p-8')
    foxes.push(imagenes) //Manejo de lotes 
}
divImages.append(...foxes)

Sergio Martinez

student•

En el caso de que quieran probar otras imagenes y variaciones de estas yo utilice esta API: 👌

Miguel Angel Reyes Moreno

student•

Workshop 2: Lazy loading

Presentación del proyecto

Repositorio del proyecto

Link de las imágenes de los zorros(primera foto)

Melba Indhira Tejada Leonardo

student•

Mi código. [](<img width="320" src="https://randomfox.ca/?i=9/images/2.jpg" alt="imagen de un cachorro"></div>)

Jonathan 🦑 Alvarez

teacher•

Hola Indhira, muchas gracias por el código, crees que podrías enviarnos tu repositorio de GitHub para ver todo el demás código y poder ayudarte mejor? :)

Johel Jesus Hoces Saenz

student•

Me sale ese error, alguien me ayuda por favor :(

Isaac Yael Ruiz

student•

Me sale que el port 8080 no está disponible pero no entiendo cómo cambiarlo, ya puse --port pero no pasa nada, también si le pongo --port 5000 ¿Cómo cambio de port? obviamente lo estoy haciendo mal pero es que no encuentro cómo se hace

Daniel Adolfo Ordoñez Rubio

student•

Hola, Isaac :) Si se trata de un proyecto de Snowpack, revisa si existe el archivo snowpack.config.mjs o puedes crearlo en el directorio raíz del proyecto. Debería exportar un objeto JSON así

export default {
  devOptions: {
    port: el puerto que quieres usar
  },
};

Isaac Yael Ruiz

student•

Gracias!

<div id="root">
          <figure class="p-4">
            <img class="mx-auto" src="https://randomfox.ca/images/1.jpg" width="200" alt="Zorro Image" />
          </figure>
          <figure class="p-4">
            <img class="mx-auto" src="https://randomfox.ca/images/2.jpg" width="200" alt="Zorro Image" />
          </figure>
        </div>

const divImages = document.getElementById('images')
let foxes = []
for(let i = 1; i < 8; i++){
    const imagenes = document.createElement('img')
    imagenes.setAttribute('src' , `https://randomfox.ca/images/${i}.jpg`)
    imagenes.setAttribute('class', 'mx-auto p-8')
    foxes.push(imagenes) //Manejo de lotes 
}
divImages.append(...foxes)

Nuestro propio plugin Lazy Loading

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