No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Carga de imágenes perezosa con IntersectionObserver y React

10/16
Recursos

¿Qué es el IntersectionObserver y cómo puede mejorar el rendimiento de tu proyecto?

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.

¿Cómo implementar un IntersectionObserver en tu proyecto?

Para implementar un IntersectionObserver en tu proyecto y optimizar el manejo de imágenes o elementos en React, necesitas seguir algunos pasos clave:

  1. 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');
        }
      });
    });
    
  2. Observar el Nodo: Asegúrate de que tu observador realmente observe el nodo en cuestión.

    observer.observe(node.current);
    
  3. Desconectar al desmontar: Es crucial desconectar el observador cuando el componente se desmonta o se re-renderiza.

    useEffect(() => {
      return () => observer.disconnect();
    }, []);
    

¿Cómo manejar el estado de las imágenes para cargarlas dinámicamente?

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:

  1. Estado inicial: Define un estado que mantenga el valor de la imagen.

    const [source, setSource] = useState('');
    
  2. Actualizar la fuente al intersectar: Cambia el estado de la URL de la imagen cuando el observador detecta visibilidad.

    if (entry.isIntersecting) {
      setSource(imageURL);
    }
    
  3. 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
    

¿Cómo mejorar la experiencia de usuario con detalles estéticos?

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:

  • Imagen en base64: Esta técnica evita peticiones adicionales al servidor y se carga inmediatamente.
  • Colorear con CSS: Mejorar el placeholder visualmente con Tailwind o cualquier otro framework CSS puede ser crucial.

Por ejemplo, usando Tailwind puedes definir el color de fondo así:

<img src={source || placeholder} className="bg-gray-300" alt="Cargando..." />

¿Por qué usar TypeScript en combinación con IntersectionObserver?

TypeScript proporciona una asistencia invaluable mediante su autocompletado y chequeo de tipos. Te permite trabajar de manera más eficiente y con menos errores:

  • Ayudas de código: Con TypeScript, obtiene sugerencias automáticas que evitan el error humano.
  • Manejo de errores: Aunque puede advertirte de potenciales errores, también puedes omitir ciertas validaciones intencionalmente si estás seguro de tu lógica.

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

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]);`