[javascript] 자바 스크립트에서 이미지를 캐시하는 방법

이미지가 어떤 방식 으로든 브라우저에로드되면 브라우저 캐시에 있으며 이미지가있는 한 현재 페이지에서 사용하든 다른 페이지에서 사용하든 다음에 사용할 때 훨씬 더 빠르게로드됩니다. 브라우저 캐시에서 만료되기 전에 사용됩니다.

따라서 이미지를 미리 캐시하려면 브라우저에 이미지를로드하기 만하면됩니다. 여러 이미지를 미리 캐시하려면 일반적으로 javascript에서 수행 할 때 페이지로드를 유지하지 않으므로 javascript를 사용하여 수행하는 것이 가장 좋습니다. 다음과 같이 할 수 있습니다.

function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.onload = function() {
            var index = list.indexOf(this);
            if (index !== -1) {
                // remove image from the array once it's loaded
                // for memory consumption reasons
                list.splice(index, 1);
            }
        }
        list.push(img);
        img.src = array[i];
    }
}

preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);

이 함수는 원하는만큼 호출 할 수 있으며 매번 프리 캐시에 이미지를 더 추가합니다.

이미지가 자바 스크립트를 통해 이와 같이 미리로드되면 브라우저는 해당 이미지를 캐시에 저장하고 다른 위치 (웹 페이지)의 일반 URL을 참조 할 수 있으며 브라우저는 브라우저가 아닌 캐시에서 해당 URL을 가져옵니다. 회로망.

결국 시간이 지남에 따라 브라우저 캐시가 가득 차서 한동안 사용되지 않은 가장 오래된 것을 버릴 수 있습니다. 따라서 결국 이미지는 캐시에서 플러시되지만 잠시 동안 거기에 있어야합니다 (캐시의 크기와 다른 검색이 수행 된 정도에 따라 다름). 이미지가 실제로 다시 미리로드되거나 웹 페이지에서 사용될 때마다 브라우저 캐시의 위치를 ​​자동으로 새로 고쳐서 캐시에서 플러시 될 가능성을 줄입니다.

브라우저 캐시는 크로스 페이지이므로 브라우저에로드 된 모든 페이지에서 작동합니다. 따라서 사이트의 한 위치에서 사전 캐시 할 수 있으며 브라우저 캐시는 사이트의 다른 모든 페이지에서 작동합니다.

위와 같이 미리 캐싱하면 이미지가 비동기 적으로로드되므로 페이지로드 또는 표시를 차단하지 않습니다. 그러나 페이지에 자체 이미지가 많은 경우 이러한 사전 캐시 이미지는 페이지에 표시되는 이미지와 대역폭 또는 연결을두고 경쟁 할 수 있습니다. 일반적으로 이것은 눈에 띄는 문제는 아니지만 느린 연결에서이 사전 캐싱으로 인해 기본 페이지로드 속도가 느려질 수 있습니다. 미리로드 된 이미지가 마지막으로로드되는 것이 괜찮다면 다른 모든 페이지 리소스가 이미로드 될 때까지 미리로드를 시작하기 위해 대기하는 함수 버전을 사용할 수 있습니다.

function preloadImages(array, waitForOtherResources, timeout) {
    var loaded = false, list = preloadImages.list, imgs = array.slice(0), t = timeout || 15*1000, timer;
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    if (!waitForOtherResources || document.readyState === 'complete') {
        loadNow();
    } else {
        window.addEventListener("load", function() {
            clearTimeout(timer);
            loadNow();
        });
        // in case window.addEventListener doesn't get called (sometimes some resource gets stuck)
        // then preload the images anyway after some timeout time
        timer = setTimeout(loadNow, t);
    }

    function loadNow() {
        if (!loaded) {
            loaded = true;
            for (var i = 0; i < imgs.length; i++) {
                var img = new Image();
                img.onload = img.onerror = img.onabort = function() {
                    var index = list.indexOf(this);
                    if (index !== -1) {
                        // remove image from the array once it's loaded
                        // for memory consumption reasons
                        list.splice(index, 1);
                    }
                }
                list.push(img);
                img.src = imgs[i];
            }
        }
    }
}

preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"], true);
preloadImages(["url99.jpg", "url98.jpg"], true);