image.onload 활용하기

이미지 다운로드 후 컴포넌트 보여주기

브라우저 렌더링 시 이미지 로딩 시간이 가장 오래 걸립니다. 특히 고화질인 경우 사용자 경험을 떨어뜨릴 수 있습니다.

onload란?

onload 함수 내의 명령은 웹브라우저 내의 모든 요소가 준비된 후 실행이 되도록 합니다.

---

◼︎ image.onload 활용 방법 2가지

1. img 태그에서 onLoad 활용하기

<예시1>

const [loading, setLoading] = useState(true);

<img
  src="myImage.png"
  alt="유저이미지"
  onLoad={() => setLoading(false)}
  onError={() => alert("image load error")}
/>

위 방법으로는 boolean 값을 통해 이미지 로딩이 완료된 후 다른 명령을 실행할 수 있습니다.

2. 함수에서 image.onload 활용하기

<예시2>

image = new Image();
image.onload = function(){
  //이미지가 로드 된 후 실행할 코드
};
image.src = 이미지 경로;