---

Image preloading

Rooms 페이지에서 캐러셀로 이미지를 표현했다.
문제는 after 버튼을 누를 때마다 다음 이미지를 로딩하고 렌더링하는데 약 1500ms 딜레이 때문에 답답하게 느껴졌다.

이러한 문제를 해결하기 위해 preload 하기로 했다.

Synchronous(동기적) load

캐러셀 이미지들은 순서를 가지고 있다.
때문에 사용자가 보는 이미지 순서를 정확하게 예측할 수 있다.
이러한 상황에서 모든 사진을 비동기적으로(병렬적) 로드한다면 효율적이지 못하다.
사용자가 보는 이미지 순서대로(동기적으로) 사진을 로드할 것이다.

function roomsImgsPreload(arr, index) {
  index = index || 0;
  if (index < arr.length) {
    const img = new Image();
    img.src = arr[index];
    img.addEventListener('load', () => {
      roomsImgsPreload(arr, index + 1);
    });
  }
}

2개의 캐러셀

이미지 캐러셀은 2개(내부, 외부)가 존재한다.
사용자가 내부 캐러셀, 외부 캐러셀 중 어떤 캐러셀을 먼저 이용할지 모르기 때문에 2개의 이미지 그룹을 병렬(사진 2개씩) 로드할 것이다.

Images src 배열

캐러셀 별로 이미지 src 를 담는 배열을 생성하였다.

// 내부 imgs src 배열.
const roomsIndoorImgsArr = [];
for (i = 1; i < 20; i++) {
  roomsIndoorImgsArr.push(`./img_src/rooms/indoor/(${i}).jpg`);
}
// 외부 imgs src 배열.
const roomsOutdoorImgsArr = [];
for (i = 1; i < 11; i++) {
  roomsOutdoorImgsArr.push(`./img_src/rooms/outdoor/(${i}).jpg`);
}

preload의 실행 시점.

Image preload 때문에 페이지 로드가 늦어지는 것을 원하지 않았다.
페이지 로드가 끝난 시점에서 실행되기를 원했다.
리소스들의 로딩이 완료되면 실행되는 load 이벤트를 이용했다.

window.addEventListener('load', roomsImgsPreload(roomsIndoorImgsArr));
window.addEventListener('load', roomsImgsPreload(roomsOutdoorImgsArr));

---

Repository를 보고 싶다면 GitHub을 참고하세요.