느린 이미지 로딩

• 컴포넌트가 아닌 이미지를 사전 로드해 보겠음
• 지금까지 모달에 컴포넌트 지연 로딩, 컴포넌트 사전 로딩을 적용했음
• 그런데 모달을 띄워보면 아래와 같은 화면이 뜸. 안 보인다면 네트워크 throttling을 걸고 모달을 띄워 보면 볼 수 있음. 이때 캐시가 걸려 있을 수도 있기 때문에 ‘disable cache’ 옵션을 체크하여 캐시를 비활성화해야 함

• 이 같은 현상은 이미지가 제때 뜨지 않아 생기는 현상임
• 모달을 띄우고 그 안에 이미지를 로드하려고 하는데, 이미지의 사이즈가 크다 보니 다운로드 시간이 오래 걸려서 다운로드가 완료될 때까지 아무것도 뜨지 않는 것임
• 이 현상은 웹 개발을 할 때 흔히 발생하는 현상이라 다양한 해결 방법이 있음. 여기서는 이미지가 화면에 제때 뜰 수 있도록 미리 다운로드하는 기법인 이미지 사전 로딩 기법을 적용해 볼 것임

이미지 사전 로딩

• 컴포넌트는 import 함수를 이용하여 로드했는데, 이미지는 이미지가 화면에 그려지는 시점, 즉 HTML 또는 CSS에서 이미지를 사용하는 시점에 로드됨
• 이런 경우 자바스크립트로 이미지를 직접 로드하는 방법이 한 가지 있음. 바로 자바스크립트의 Image 객체를 사용하는 방법임
• Image 객체는 다음과 같이 new 연산자를 이용하여 생성할 수 있음. 그런 다음 생성된 인스턴스의 src속성에 원하는 이미지의 주소를 입력하면 해당 이미지를 로드할 수 있음

const img = new Image();
img.src = '{이미지 주소}'

• 직접 브라우저의 콘솔 창에 테스트해 볼 수 있음
• 개발자 도구에서 Network 패널과 Console 패널을 동시에 열고 콘솔 창에 위 코드를 입력하면 코드가 입력된 순간 Network 패널에서 해당 이미지가 다운로드되는 것을 볼 수 있음

<aside> 💡 개발자 도구에서 esc를 누르면 하단에 콘솔 창이 분할되어 나타나고 다시 누르면 사라짐. 또한 Network 패널에서 이미지의 다운로드 상태를 보려면 필터를 All로 선택하거나 Img로 선택해야 함

</aside>