[책] 자바스크립트 코드 레시피 278 - 172일차

이미지 로딩 후 작업하기

• 이미지 로딩을 지연시키고 싶을 때

구문

onload 로딩 완료 시점의 처리 작업 지정

설명

onload 이벤트를 사용해 이미지 로딩 완료 시점의 처리 작업을 지정할 수 있습니다. 예를 들어, 로딩 중인 상황에서는 '로딩 중' 을 표시하고 로딩이 완료되면 완료 표시로 변경하는 작업이 가능합니다. 기능 구현을 위해 HTML의 src 속성 초깃값은 설정하지 않고 공백으로 둡니다.

실습

index.html

<img src="" alt="">

---

script.js

const img = document.querySelector('img');
img.onload = () => {
  // 이미지 완료 후 처리 작업
  // img.classList.remove('loading');
  // img.src = 'image_content_.jpg';
  setTimeout(() => { // setTimeout 바뀌는 모션을 알기 위해 사용하였습니다. 실제로는 안 넣어도 됩니다.
    img.classList.remove('loading');
    img.src = 'image_content_.jpg';
  }, 500);
}
img.src = 'image_photo_.jpg';
img.classList.add('loading');