LazyImage

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

width, height 값을 입력해 이미지의 크기를 조절 할 수 있으며, 동시에 Layout Shift를 개선할 수 있습니다.

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

Interface

interface LazyImageProps
  extends React.ComponentProps<'img'>,
    IntersectionObserverInit {
  src: string;
}

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

Usage

Default

import { LazyImage } from '@devgrace/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>
  );
}; 

Fallback

import { LazyImage } from '@devgrace/react';
import img1 from '../assets/img1.png';

const Example = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  const wrapperStyle: CSSProperties = {
    position: 'relative',
    width: '400px',
    height: '400px',
  };

  const imgStyle: CSSProperties = {
    position: 'absolute',
    top: 0,
    left: 0,
    opacity: isLoaded ? 1 : 0,
    transition: 'opacity 0.2s',
  };

  const skeletonStyle: CSSProperties = {
    width: '400px',
    height: '400px',
    backgroundColor: '#cdcbcb',
  }

  return (
    <div style={wrapperStyle}>
      {!isLoaded && <div style={skeletonStyle} />}
      <LazyImage
        style={imgStyle}
        width={400}
        height={400}
        src={img1}
        alt="img1"
        onLoad={() => setIsLoaded(true)}
      />
    </div>
  );
}; 

Example

스크롤 해주세요.

Note

Intersection Observer API