Low quality image placeholder(LQIP)

저화질 이미지를 이용한 Lazyload 기법

intersectionObserver 이용

저화질 이미지를 기본값으로 두고, 요소가 viewport에 들어오는 경우 원본 이미지를 로드하는 방식

https://codepen.io/imagekit_io/embed/EpqXGW

img.onload 이용

페이지 초기 화면의 이미지에 lazyload를 적용하는 경우, 저화질 이미지가 로드되지 않는 경우가 있음

• img.onload를 이용해 이미지를 로드한 이후 lazyload가 트리거 되도록 수정

  import { useRef } from 'react';
  
  const LazyLoadComponent = () => { 
  	const imgRef = useRef<HTMLImageElement>(null);
  
    window.onload = () => {
      if (imgRef.current && imgRef.current.dataset.src) {
        imgRef.current.src = imgRef.current.dataset.src;
      }
    };
  	
  	return (
  		<div>
  			<img src="./img.webp" data-src="./low_img.webp" alt="lazyload"/>
  		</div>
  	)
  }
  

참고

Lazy Loading Images – The Complete Guide