preload(컴포넌트, 이미지)

preload 타이밍 

1. 마우스가 그 이벤트를 하러 갈때

2. 초기화 렌더링이 끝나고 componentDidMount 타이밍

 

preload 기능이 포함된 lazyload 시키기(feat.유동균) 

const lazyWithPreload = import =>{
   const Component = React.lazy(import)
   Component.preload = import
   return Component
}

이미지 prelaod 시키기

const preImg = new Image()
preImg.src = 파일 주소

위의 코드를 통해 preload 타이밍에서 이미지 소스를 불러오고 앞서 블로그에 글을 남겼던 HTTP의 캐시를 통해 이 이미지를 먼저 로드해놓았다가 사용할 수 있게 된다.