Skip to main content

LazyImage

useIntersectionObserver 를 활용해 Viewport에 노출될 때 할당된 이미지를 Lazy Loading 하는 이미지 컴포넌트입니다.

Intersection Observer Option을 설정할 수 있습니다.(하단 Note 참고)

만약, 이미지 load 중에 특정 Fallback 컴포넌트를 노출하고 싶다면, 이를 선언적으로 활용하기 위해 LazyImage를 확장해서 만든 FallbackLazyImage 컴포넌트 가 있습니다.


Code​

🔗 실제 구현 코드 확인

Interface​

typescript
interface IntersectionObserverInit {
  root?: Element | Document | null;
  rootMargin?: string;
  threshold?: number | number[];
}
typescript
interface LazyImageProps
  extends React.ComponentProps<'img'>,
    IntersectionObserverInit {
  src: string;
}

const LazyImage: React.ForwardRefExoticComponent<
  Omit<LazyImageProps, 'ref'> & React.RefAttributes<HTMLImageElement>
>;

Usage​

typescript
import { LazyImage } from '@modern-kit/react';
import img1 from '../assets/img1.png';
import img2 from '../assets/img2.png';

const Example = () => {
  return (
    <div>
      {/* ... */}
      <LazyImage width={400} height={400} src={img1} alt="img1" />
      {/* ... */}
      <LazyImage width={400} height={400} src={img2} alt="img2" />
      {/* ... */}
    </div>
  );
};

Example​

스크롤 해주세요.
img1
img2
img3

Note​