JavaScript로 이미지 미리 로드(Preload)하는 방법 완벽 가이드

JavaScript로 이미지 미리 로드하기

웹 페이지에서 이미지가 늦게 로딩되어 화면이 깜빡이거나 빈 공간이 보이는 경험을 해본 적이 있으신가요? 이런 문제를 해결하려면 이미지 미리 로드(Preload) 기법을 활용하는 것이 좋습니다. JavaScript에서는 Image() 생성자를 사용해 아주 간단하게 이미지를 미리 불러올 수 있습니다.

기본 구현 방법

다음 함수는 URL을 받아 해당 이미지를 미리 로드하는 가장 기본적인 방법입니다.

function preloadImage(url) {
    let img = new Image();
    img.src = url;
    return img;
}

new Image()는 HTML의 <img> 태그와 동일하게 동작하는 객체를 생성합니다. src 속성에 URL을 할당하는 순간 브라우저는 즉시 해당 이미지를 다운로드하기 시작합니다. 이렇게 하면 나중에 실제로 이미지를 화면에 표시할 때 캐시에 저장된 데이터를 사용하므로 즉시 렌더링됩니다.

여러 이미지 한 번에 미리 로드하기

실제 프로젝트에서는 여러 장의 이미지를 동시에 미리 로드해야 하는 경우가 많습니다. 배열과 반복문을 활용하면 손쉽게 처리할 수 있습니다.

const imageUrls = [
    'images/banner.jpg',
    'images/profile.png',
    'images/gallery-01.jpg'
];

imageUrls.forEach(url => preloadImage(url));

주의사항: 가비지 컬렉션(Garbage Collection)

여기서 중요한 점 하나를 짚고 넘어가야 합니다. 미리 로드한 이미지 객체를 참조하지 않으면, 브라우저는 몇 초 후 해당 이미지를 메모리에서 해제(가비지 컬렉션)합니다.

즉, 위 예제처럼 함수 내부에서만 img 객체를 만들고 외부에서 참조를 유지하지 않으면, 미리 로드한 노력이 허사가 될 수 있습니다. 이를 방지하려면 img 객체에 대한 참조를 반드시 어딘가에 저장해 두어야 합니다.

const preloadedImages = [];

function preloadImage(url) {
    let img = new Image();
    img.src = url;
    preloadedImages.push(img); // 참조를 유지하여 GC 방지
    return img;
}

위 코드처럼 전역 배열이나 객체에 이미지 객체를 저장해 두면, 브라우저가 임의로 메모리를 해제하지 않으므로 안정적으로 캐시를 활용할 수 있습니다.

마무리

이미지 미리 로드는 특히 이미지 슬라이더, 갤러리, 게임처럼 순차적으로 여러 이미지를 보여주는 UI에서 체감 성능을 크게 향상시키는 기법입니다. 단, 너무 많은 이미지를 한꺼번에 미리 로드하면 초기 대역폭 낭비로 이어질 수 있으므로, 정말 필요한 핵심 이미지만 선별해서 적용하는 것이 좋습니다.