Nuevo chiste, ponerle un ! a mis amigos
Introducción
El presente del Frontend es TypeScript
Tipado implÃcito vs. tipado explÃcito
Creando una app con React y TypeScript
Tipado en React
Diferentes formas de definir un componente
El objeto props y children
State con tipos primitivos
State con tipos personalizados
React y el DOM
Tipos para eventos y callbacks de escuchadores
Tipos para referencias y observadores
Lazy loading con observadores
Componentes que extienden elementos DOM
Reto: sigamos extendiendo el DOM
Configuraciones avanzadas
Creando tipos propios para la aplicación
Trabajando con librerÃas no-tipadas
Trabajando con librerÃas que extienden el objeto window
Próximos pasos
¿Quieres más cursos de React con TypeScript?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
13 DÃas
14 Hrs
45 Min
11 Seg
Lazy loading con observadores
10/16Recursos
Aportes 9
Preguntas 2
Ordenar por:
un aporte, hay una libreria llamada react-lazy-load-image-component y es muy sencilla, se usa de la dsiguiente manera
npm install react-lazy-load-image-component
import {LazyLoadImage} from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css
<LazyLoadImage
className="w-full h-80 rounded-lg shadow-lg"
src={image}
alt={alt}
effect="blur"
/>
La imagen
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=
Hola a todos devs!!. Les dejare un consejo de un problema que me paso a mi. Cuando cargaba varias imagenes con el boton y luego daba scroll hacia abajo veia que en mi Network se cargaban todas al mismo tiemo antes de hacer más scroll.
.
Me di cuenta de que era por que al no estar renderizadas las imagenes quedan todas juntas y al hacer scroll es como si todas aparecieran en la pantalla.
.
Lo arregle metiendo la imagen dentro de un div con margin y de esta manera ya existe una separacion entre las imagenes que no estan renderizadas aun.
Esta clase me encantó, gracias.
En los recursos no hay nada, al menos en el nuevo frontend
! = ¡callate!, yo se qué estoy haciendo
Un buen material para poder estudiar las especificaciones: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Si quieren que la imagen solo sea visible si esta aparece completamente en el viewport, pueden agregar la opcion **treshhold:**
` useEffect(() ``=>`` { ``let`` options = { threshold: 1.0 }; ``let`` observer = new IntersectionObserver((``entries``) ``=>`` { entries.forEach((``entry``) ``=>`` entry.isIntersecting && setSrc(image)); }, options); if (node.current) { observer.observe(node.current); }`
` return () ``=>`` observer.disconnect(); }, [image]);`
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?