Cursos Empresas Blog Live Conf Eventos Precios

0:008:32

Nuestro propio plugin Lazy Loading

Curso de Manipulación del DOM

Clase 21 de 29

Clase 21 / 29

Comentarios (27)27 comentarios

Alejandro Dotor

Hace 6 años

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

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

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

Hace 5 años

API sumamente útil xD

Juan Cruz

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

Andrés Felipe García Rendón

gracias por el dato colega!

Luciano Marchese

Muy bueno!

Gabriel Andrés Rondón Barragán

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

Sebastian Heredia

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

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é

<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

Hace 3 años

Jaja...gracias!!!

Juan Diego Loaiza Martinez

Continuamos :)

Andres Felipe Pinchao Ramirez

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

Hace 4 años

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

Oscar Leandro Camacho Vasquez

El enlace de la imagen

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

Edgar Lopez Arroyo

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

Happy to learn new things. :)

Jacobo Burbano

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

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

Miguel Angel Reyes Moreno

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

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

Jonathan 🦑 Alvarez

Profesor

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

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

Isaac Yael Ruiz

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

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

Gracias!

Nuestro propio plugin Lazy Loading

Progreso del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

Librerías relacionadas

Conclusiones