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

이미지 로딩 지연시키기

• 이미지 로딩 중인 상태를 표시하고 싶을 때
• 이미지 로딩 후 이미지 데이터에 엑세스하고 싶을 때

설명

웹 페이지 내 이미지 로딩을 지연시키기 위해서는 DOMContentLoaded 이벤트에서 img 요소 data-src 속성의 값을 Map에 보관한 뒤 요소의 속성값을 비운다. src가 아닌 data-src 를 사용하는 이유는 src 속성에 공백 값이 들어가면 네트워크 통신이 발생하기 때문입니다. 로딩하고 싶은 시점에 Map 에 보관한 값을 src 속성에 넣어 작업을 처리합니다. 해당 작업을 사용하여 버튼 클릭 시 이미지를 로딩하는 샘플을 확인합니다.

실습

index.html

<div>
  <img src="" alt="" data-src="image_photo_a.jpg" width="320" height="214">
  <img src="" alt="" data-src="image_photo_b.jpg" width="320" height="214">
</div>
<button class="btn">그림 로딩하기</button>

---

script.js

const srcMap = new Map();
window.addEventListener('DOMContentLoaded', () => {
  const imgs = document.querySelectorAll('img');
  imgs.forEach((img) => {
    srcMap.set(img, img.dataset.src);
    img.removeAttribute('src');
  });
});
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
  const imgs = document.querySelectorAll('img');
  imgs.forEach((img) => {
    const source = srcMap.get(img);
    img.src = source;
  });
});