JS Image preloading

웹 페이지를 변경하거나 다른 페이지로 이동할 경우 이미지가 많거나 크기가 커서 시간이 오래 걸릴 때 사용하는 방법이다. 사용자의 요청이 들어오기 전에 이미지를 미리 로드해 캐시로 이미지를 바로 가져오는 방식이다.

const preLoadImgSrc = [
    "./lib/img1.png",
    "./lib/img2.png",
    "./lib/img3.png"
];

const preLoadImg = (images) => {
    images.forEach((image) => {
        const img = new Image();
        img.src = image;
    });
};

preLoadImg(preLoadImgSrc);

이미지 사전 로드를 사용하면 이미지를 순차적으로 다운하는 것이 아니라 병렬적으로 다운하기 때문에 전체 이미지 로딩 시간이 줄어들게 된다. 그러나 이미지 하나하나의 다운 시간은 늘어나기 때문에 다른 이미지들보다 빠르게 로딩되어야 하는, 즉 우선순위가 높은 이미지가 있다면 사전 로드 방식이 적합하지 않을 수 있다.

이런 경우에는 image.onload를 이용해 원하는 이미지들을 순차적으로 다운할 수 있다.

const preLoadImgSrc = [
    "./lib/img1.png",
    "./lib/img2.png",
    "./lib/img3.png"
];

const preLoadImg = (images, index) => {
    index = index || 0;
    if (images && images.length > index) {
        const img = new Image();
        img.onload = () => {
            preload(images, index + 1);
        }
        img.src = images[index];
    }
}

preLoadImg(preLoadImgSrc);