김민태의 데브캠프 2기 - Image Lazy Loading

정의 : lazy란 '게으른, 가능한 길게 일을 미루는 행우;'를 의미

그래서 ILL이란, 페이지 안에 있는 실제 이미지들을 바로 보여주는게 아닌, 실제로 화면에 보일 필요가 있을 때
로딩할 수 있도록 하는 것

ILL 구현 방법

1. javascript 이벤트를 이용해서 구현
2. Interserction Observer API 이용해서 구현
3. 브라우저 Native Lazy Loading 이용 => loading 속성 이용

 

구현 

LazyImage.jsx 코드

const Lazyimage = ({url, name}) => {

    const [isLoading, setIsLoading ] = useState(true);
    const [opacity, setOpacity] = useState('opacity-0');

    useEffect(() => {
        isLoading ? setOpacity('opacity-0') : setOpacity('opacity-100');
    }, [isLoading])
  return (
    <>
        {isLoading && (
            <div className='absolute h-full z-10 w-full flex items-center justify-center'>
                ...loading
            </div>
        )}

        <img
        src={url}
        alt={name}
        width="100%"
        height="auto"
        loading="lazy"
        onLoad={() => setIsLoading(false)}
        className={`object-contain h-full ${opacity}`}
        />
    
    </>

  )
}