[JS] 이미지 로딩 지연 방지하기(Image Preload)

선결론!

const loadImg = () => {
  const preLoadImgSrc = [
    "/img/images/1.png",
    "/img/images/2.png",
    "/img/images/3.png",
  ];
  preLoadImgSrc.forEach((arr) => {
    const img = new Image();
    img.src = arr;
  });
};

 

이미지 프리로딩이란?

이미지가 필요해지는 시점보다 미리 로드해 두어 페이지 로딩 중의 딜레이를 줄이는 데 사용됨.
특히 애니메이션이나 인터랙티브한 웹 게임에서 이미지가 자주 등장할 때 성능을 개선할 수 있음.

 

 

로딩 바

 

loadImg 함수의 장점

• 이미지 로딩 지연 방지: 브라우저가 해당 이미지가 실제로 화면에 렌더링되기 전에 이미 다운로드를 마치므로, 사용자에게 딜레이 없이 바로 이미지를 보여줄 수 있음
• 브라우저 캐시 활용: 이미지를 미리 로드해두면, 이후 해당 이미지가 필요할 때 브라우저 캐시에서 가져오기 때문에 속도 향상이 가능함

성능 향상 효과가 있을 상황

• 게임이나 애니메이션: 이미지가 애니메이션에 포함되어 빠르게 전환되거나 사용되는 경우, 프리로딩을 통해 끊김 없는 애니메이션이 가능함
• 많은 이미지를 사용하는 경우: 한 번에 여러 이미지를 동적으로 불러오는 페이지에서, 이미지를 미리 로드해두면 시각적인 지연을 방지할 수 있음

성능 영향이 적거나 불필요할 때

• 이미지가 너무 크거나 많을 때: 많은 또는 고해상도 이미지를 미리 로드하면, 초기 페이지 로딩 시점에 네트워크 트래픽이 증가하여 오히려 성능을 저하시킬 수 있음, 특히 모바일 환경에서는 네트워크 대역폭에 영향을 미칠 수 있음
• 이미지가 즉시 사용되지 않는 경우: 이미지가 즉시 필요한 상황이 아니라면 불필요하게 리소스를 소비하게 됩니다. 예를 들어, 사용자가 특정 페이지에 도달하지 않거나 이미지를 보지 않는다면 낭비 됨.

 

불필요하게 많은 이미지만 미리 로드하면 리소스 낭비가 되니

이 점만 빼면 정말 좋은 기능이 되겠죠? ^_^