ImageLazy | React Lazy Load de Imágenes con Intersection Observer

Un componente React para cargar imágenes de forma diferida usando Intersection Observer. Liviano, personalizable y compatible con SSR.

📦 Instalación

npm install react-lazy-img-observer

Disponible en npm · Código fuente en GitHub

📦 Ver en npm 🔗 Ver en GitHub

🚀 Uso Básico

import ImageLazy from "react-lazy-img-observer";

function App() > {
  return (
    <ImageLazy
      src="https://example.com/photo.jpg"
      alt="Example image"
      width=400
      height=300
    />
  );
}

🎨 Ejemplo Avanzado

import ImageLazy from "react-lazy-img-observer";

const Spinner = () => <div className="spinner">Loading...</div>;

function GalleryImage() > {
  return (
    <ImageLazy
      src="/img/cat.webp"
      alt="Cute Cat"
      width=300
      height=200
      fallbackSrc="/img/fallback.webp"
      backgroundColor="#eee"
      animationDuration="1s"
      blurAmount="8px"
      transitionType="fade"
      loadingComponent={ <Spinner /> }
    />
  );
}

💫 Transición personalizada con CSS

.my-custom-transition {
  opacity: 0;
  transform: rotate(10deg) scale(0.95);
  transition: all 0.8s ease-in-out;
}

.my-custom-transition.loaded {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

🧩 Props

Props principales disponibles:

src: Ruta de la imagen ✅
alt: Texto alternativo ✅
width / height: Dimensiones
fallbackSrc: Imagen alternativa si falla
backgroundColor, blurAmount, animationDuration
transitionType: "blur" | "fade" | "scale" | "custom"
loadingComponent: Spinner personalizado ✅
onLoadComplete: Callback al terminar de cargar
visibleByDefault: Carga inmediata

🔧 ¿Cómo funciona?

Usa IntersectionObserver para detectar cuando la imagen entra en el viewport.

Por defecto, carga al 50% de visibilidad (threshold=0.5)
Compatible con SSR (Next.js)
Permite estilos y transiciones personalizadas

🖼 Spinner CSS

.my-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

📊 Comparativa

Característica	ImageLazy ✅	react-lazy-load-image-component ❌
Liviano	✅	❌
SSR Friendly	✅	✅
Transiciones CSS propias	✅	❌
Spinner nativo	✅	❌
Fallback	✅	✅
Imágenes responsivas	✅	✅

📄 Licencia

MIT

👤 Autor

Percy Chuzon
📧 contacto@percychuzon.com
🌐 percychuzon.com

💡 Tip

Usa transitionType="custom" y aplica tus estilos con CSS. Así de simple.

ImageLazy - Carga diferida de imágenes