이미지 로딩속도 높이기

function Score() {

  const preloadImages = (images) => {

    images.forEach((image) => {

      new Image().src = image;

    });

  };

  preloadImages([

    './img/card/dia/A.png',

    './img/card/dia/2.png',

    './img/card/dia/3.png',

    './img/card/dia/4.png',

    './img/card/dia/5.png',

    './img/card/dia/6.png',

    './img/card/dia/7.png',

    './img/card/dia/8.png',

    './img/card/dia/9.png',

    './img/card/dia/10.png',

    './img/card/dia/J.png',

    './img/card/dia/Q.png',

    './img/card/dia/K.png',

    './img/card/clover/A.png',

    './img/card/clover/2.png',

    './img/card/clover/3.png',

    './img/card/clover/4.png',

    './img/card/clover/5.png',

    './img/card/clover/6.png',

    './img/card/clover/7.png',

    './img/card/clover/8.png',

    './img/card/clover/9.png',

    './img/card/clover/10.png',

    './img/card/clover/J.png',

    './img/card/clover/Q.png',

    './img/card/clover/K.png',

    './img/card/heart/A.png',

    './img/card/heart/2.png',

    './img/card/heart/3.png',

    './img/card/heart/4.png',

    './img/card/heart/5.png',

    './img/card/heart/6.png',

    './img/card/heart/7.png',

    './img/card/heart/8.png',

    './img/card/heart/9.png',

    './img/card/heart/10.png',

    './img/card/heart/J.png',

    './img/card/heart/Q.png',

    './img/card/heart/K.png',

    './img/card/spade/A.png',

    './img/card/spade/2.png',

    './img/card/spade/3.png',

    './img/card/spade/4.png',

    './img/card/spade/5.png',

    './img/card/spade/6.png',

    './img/card/spade/7.png',

    './img/card/spade/8.png',

    './img/card/spade/9.png',

    './img/card/spade/10.png',

    './img/card/spade/J.png',

    './img/card/spade/Q.png',

    './img/card/spade/K.png',

  ]);

 

 return

     (

      <></>

     );

}

 

※문제

-특정 상황에서 이미지 카드들이 나와야 하는데 UI들은 빠르게 나오는 반면에

한 템포씩 느리게 나오는 이미지들이 문제가 됐었다.

그래도 한 번 나온 이미지들은 다음에 나올때는 빠르게 나왔었다.

 

※해결

-결론부터 얘기하자면  모든 이미지를 한 곳에 담아두고 함수를 실행시키면 된다.

 

※기타

이지미를 import 형식으로 가져와서 변수명으로 써도 되겠다만

나는 코드의 줄이 늘어나는것을 원치 않기때문에 따로 적어두었다.