[JavaScript] 자바스크립트에서 이미지 로딩 후 작업하기

185_자바스크립트에서 이미지 로딩 후 작업하기

[적용]

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

---

[문법]

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

---

[내용]

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

 

HTML                                                                                                                                                              index.html

<img id="myImage" width="640" height="426" />

JavaScript                                                                                                                                                          main.js

const img = document.querySelector('#myImage');
img.onload = () => {
  // 이미지 로딩 완료 후 처리 작업
  img.classList.remove('loading');
};
img.src = 'images/photo.jpg';
img.classList.add('loading');

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김