[WPO] 이미지 Preloading

저번 포스팅에서는 컴포넌트를 특정 시점에 Preloading 하는 것을 기록했었다. (이후 업로드 예정,, 실수로 삭제해버렸기 때문에^^)

[WPO] 컴포넌트 Preloading

 

 

 

 

이번에는 이미지를 Preloading 해보자!

 

Modal 을 선택했을 경우, Modal 내부 이미지들 중에 가장 먼저 뜰 대문사진이 다른 이미지들과 함께 로딩이 되어 느리게 뜨는 것을 경험해본적이 있을 것이다. 

이 Modal의 대문? 대표? 사진을 먼저 로딩하는 최적화 방법을 기록해보고자 한다!

 

🚫 근데, 컴포넌트 같은 경우에는 import로 Preloading하면 되는데 이미지는 어떻게 Preloading 할까?

→ 이미지를 화면에 노출하지 않아도 로드하는 방법이 하나있다! 바로 Image() 객체를 이용해보자

 

 

 

 

---

 

📌 Image() 객체

- 이미지를 화면에 노출하지 않아도 로드하는 방법

src에 이미지 주소를 넣고 엔터를 치는 순간 이미지 로드! 가 되는 것을 확인할 수 있다.

 

Image() 객체를 이용해 이미지 Preloading 하는 코드

useEffect(()=> {
    LazyImageModal.preload()

    const img = new Image()
    img.src = 'https://stillmed.olympic.org/media/Photos/2016/08/20/part-1/20-08-2016-Football-Men-01.jpg?interpolation=lanczos-none&resize=*:800'
}, [])

요롷게 이미지가 모달컴포넌트가 preload될 때, image도 바로 로드되도록 !

 

 

 

 

 

 

---

Reference

Inflearn : 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React)