[JS]이미지가 로딩되었는지 체크하는 방법

이미지가 로딩되었는지 체크하는 방법

JavaScript에서 이미지를 가져와서 웹 페이지에 보여주는 방법은 간단합니다. <img> 태그의 src 애트리뷰트에 이미지가 위치하는 url을 설정하면 됩니다.

 

예를 들어, 다음 메인 사이트의 로고 사진을 가져와서 보여주고 싶다고 가정합시다.

순서 1. 다음 메인 사이트로 이동한 다음 크롬 개발자 도구를 실행합니다.

순서 2. 요소 탭을 실행한 다음 좌측 상단의 아이콘을 클릭합니다.

순서 3. 로고 사진을 클릭합니다.

순서 4. 현재 소스를 복사한 다음 src 애트리뷰트에 설정합니다.

<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png"/>

JavaScript에서 이미지를 불러오는 방법은 간단하지만, 용량이 큰 이미지를 로드하는 경우 많은 시간이 걸릴 수 있으며 이미지를 DOM에 추가하는 과정에서 에러가 발생할 수 있습니다.

 

따라서, 개발자는 이미지를 로드하는 과정에서 로딩바를 띄우거나 에러가 발생한 경우 메세지를 사용자에게 알려주거나 이미지를 대체해야합니다.

 

JavaScript에서는 load 이벤트를 사용하여 이미지가 로드 중인지 체크할 수 있으며 complete 프로퍼티를 사용하여 이미지가 완전히 로드되었는지 확인할 수 있습니다. 이번 포스팅은 onload 이벤트와 complete 프로퍼티 사용 방법을 설명합니다.

반응형

---

load 이벤트

load 이벤트는 리소스 로딩이 끝나면 실행되는 이벤트입니다.

 

addEventListener() 메서드를 사용하여 이벤트 리스너를 등록할 수 있습니다.

<img
  id="img-daum"
  src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png"
/>

const imgNode = document.getElementById("img-daum");

imgNode.addEventListener("load", () => {
  console.log('image load complete');
});

또 다른 방법으로 이벤트 핸들러를 사용할 수 있습니다.

<img id="img-daum" />

const imgNode = document.getElementById("img-daum");

imgNode.src = "https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png";
imgNode.onload = function () {
  console.log("image load complete");
};

---

complete 프로퍼티

HTMLImageElement 인터페이스 전용인 complete 프로퍼티는 이미지가 완전히 로드되었는지 나타내는 불리언 값입니다. 이미지가 완전히 로드된 경우 true이며, 그렇지 않으면 false입니다.

 

load 이벤트는 리소스 로딩이 끝나면 실행되는 이벤트이므로 load 이벤트 리스너 혹은 이벤트 핸들러에서 complete 프로퍼티를 호출하면 항상 true가 반환됩니다.

<img
  id="img-daum"
  src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png"
/>

const imgNode = document.getElementById("img-daum");

imgNode.addEventListener("load", function() {
  console.log(this.complete); // true
});

---

정리

• load 이벤트는 리소스 로딩이 끝나면 실행되는 이벤트입니다.
• HTMLImageLement 인터페이스 전용인 complete는 이미지가 완전히 로드되었는지 나타내는 불리언 값입니다.