No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Lazy loading con observadores

10/16
Recursos

Aportes 11

Preguntas 2

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

URL de la imagen gris:

"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="

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.

yo utilizeesto para dejar como placeholder
https://placehold.co/

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