Nuevo chiste, ponerle un ! a mis amigos
Introducción
TypeScript y React: Proyecto con Next.js y Hooks
Tipado Explícito en TypeScript: Mejora tu Código
Componentes React con TypeScript en Next.js
Tipado en React
Componente de Imágenes Perezosas con React y TypeScript
Props en React: Gestión de Tipos en TypeScript
Tipado de useState con TypeScript en React: Arrays de Strings
Refactorización de Tipos en React con TypeScript
React y el DOM
Manejadores de Eventos en React con TypeScript
Carga Diferida de Imágenes en React con UseRef y TypeScript
Carga de imágenes perezosa con IntersectionObserver y React
Extender atributos HTML en componentes React con TypeScript
Funciones y tipos en JavaScript y TypeScript
Configuraciones avanzadas
Tipos Globales en TypeScript para Aplicaciones RIA
Tipos personalizados en TypeScript para librerías sin tipos
Extensión de objetos Window en TypeScript para scripts externos
Próximos pasos
Tipado avanzado en Redux con TypeScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
El IntersectionObserver es una poderosa Web API que permite detectar cuando un elemento del DOM es visible dentro del "viewport" de tu navegador. Este proceso es crítico para optimizar el rendimiento de las aplicaciones, dado que evita el desperdicio de recursos cargando elementos que no son visibles para el usuario. Esta técnica no solo es simple, sino también poderosa, y ha evolucionado considerablemente gracias a la continua mejora de los observables.
Para implementar un IntersectionObserver en tu proyecto y optimizar el manejo de imágenes o elementos en React, necesitas seguir algunos pasos clave:
Crear el Observador: Define un nuevo observador con la API Web disponible en el objeto window
, el cual requiere un callback
.
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Elemento visible');
}
});
});
Observar el Nodo: Asegúrate de que tu observador realmente observe el nodo en cuestión.
observer.observe(node.current);
Desconectar al desmontar: Es crucial desconectar el observador cuando el componente se desmonta o se re-renderiza.
useEffect(() => {
return () => observer.disconnect();
}, []);
La carga dinámica de imágenes mejora la experiencia del usuario al representar solo aquellas que son necesarias. Para eso, puedes utilizar useState
en React para cambiar el estado de las imágenes:
Estado inicial: Define un estado que mantenga el valor de la imagen.
const [source, setSource] = useState('');
Actualizar la fuente al intersectar: Cambia el estado de la URL de la imagen cuando el observador detecta visibilidad.
if (entry.isIntersecting) {
setSource(imageURL);
}
Renderizar espacio de carga: Usa una imagen en blanco pintada con CSS para proporcionar una mejor experiencia.
const placeholder = 'data:image/gif;base64,...'; // Imagen transparente en base64
La sensación de que "algo está sucediendo" es esencial para la percepción del rendimiento. Utilizar trucos como renderizar imágenes transparentes con color de fondo ayuda significativamente:
Por ejemplo, usando Tailwind puedes definir el color de fondo así:
<img src={source || placeholder} className="bg-gray-300" alt="Cargando..." />
TypeScript proporciona una asistencia invaluable mediante su autocompletado y chequeo de tipos. Te permite trabajar de manera más eficiente y con menos errores:
En suma, el uso efectivo del IntersectionObserver, React y TypeScript puede elevar el rendimiento y usabilidad de tu aplicación web, creando una experiencia más fluida y optimizada para los usuarios. Con estos fundamentos, estás en camino de dominar técnicas avanzadas que se traducen en software robusto y eficiente. No dudes en seguir explorando y mejorando tus habilidades para llevar tus proyectos al siguiente nivel.
Aportes 9
Preguntas 2
Nuevo chiste, ponerle un ! a mis amigos
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.
! = ¡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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?