[javascript] 자바 스크립트로 어떻게 이미지를 캐시합니까?


3 Answers

@ Pointy는 자바 스크립트로 이미지를 캐시하지 않는다고 말했기 때문에 브라우저는 그렇게합니다. 그래서 이것은 당신이 요구하는 것일 수도 있고 그렇지 않을 수도 있습니다 ... 그러나 자바 스크립트를 사용하여 이미지를 미리 불러올 수 있습니다. 사전로드하려는 모든 이미지를 배열에 넣고 해당 배열의 모든 이미지를 숨겨진 img 요소에 넣으면 효과적으로 이미지를 사전로드 (또는 캐시)합니다.

var images = [
'/path/to/image1.png',
'/path/to/image2.png'
];

$(images).each(function() {
var image = $('<img />').attr('src', this);
});
Question

친구들과 저는 미래에 더 빨리 이미지를 표시하기 위해 특정 이미지를 캐시하고 싶은 웹 사이트에서 작업하고 있습니다. 두 가지 주요 질문이 있습니다.

  1. 어떻게 이미지를 캐시합니까?
  2. 이미지가 캐시 된 후에 어떻게 사용합니까? (그리고 페이지 A에 이미지가 캐시되어 있는지 확인하기 위해 페이지 B에서 사용하기 위해 캐시에서 이미지를 호출 할 수 있습니다.)

또한 캐시 된 버전의 이미지가 만료 될 설정할 수 있습니까?

예제 및 / 또는이를 더 설명하는 페이지에 대한 링크가 포함 된 경우 많은 도움이 될 것입니다.

원시 자바 스크립트 또는 jQuery 버전을 사용하여 문제가 없습니다.




lazyload 이미지에 비슷한 기술을 사용하지만 Javascript가 첫 번째 로딩 할 때 브라우저 캐시에 액세스하지 않음을 알 수는 없습니다.

내 예 :

슬라이더가 2 초 기다리는 4 개의 이미지로 내 홈페이지에 회전 배너가 있습니다. 자바 스크립트가 다음 이미지를로드하고 2 초 기다리는 것보다

이러한 이미지에는 수정할 때마다 고유 한 URL이 있으므로 브라우저에 1 년 동안 캐시되는 캐싱 헤더가 생성됩니다.

max-age: 31536000, public

이제 Chrome Devtools를 열고 '캐시 사용 안함'옵션이 활성화되어 있지 않고 캐시를 지운 후 처음으로 페이지를로드하면 모든 이미지가 가져오고 200 개의 상태가됩니다. 배너의 모든 이미지가 한주기 씩 지나면 네트워크 요청이 중지되고 캐시 된 이미지가 사용됩니다.

이제 정기적으로 새로 고침을하거나 서브 페이지로 가서 뒤로를 클릭하면 캐시에있는 이미지가 무시 된 것 같습니다. Chrome devtools의 네트워크 탭에있는 "디스크 캐시에서"라는 회색 메시지가 표시 될 것으로 예상됩니다. 대신에 회색 대신 녹색 상태 원으로 매 2 초마다 요청이 전달되는 것을 볼 수 있습니다. 데이터가 전송되는 것을 볼 수 있으므로 자바 스크립트에서 캐시가 전혀 액세스되지 않는다는 인상을받습니다. 페이지가로드 될 때마다 이미지를 가져옵니다.

따라서 홈 페이지에 대한 각 요청은 이미지의 캐싱 정책에 관계없이 4 개의 요청을 트리거합니다.

위의 내용과 새로운 http2 표준을 고려하면 대부분의 웹 서버와 브라우저가 지원되므로 http2가 모든 이미지를 거의 동시에로드하므로 lazyloading 사용을 중단하는 것이 좋습니다.

이것이 Chrome Devtools의 버그 인 경우 아직 아무도 눈치 채지 못했습니다. ;)

이것이 사실이라면 lazyloading을 사용하면 대역폭 사용량 만 증가합니다.

내가 틀렸다면 나를 바로 잡아주세요. :)




나는 항상 Konva JS : 이미지 이벤트 에서 언급 한 예제를 사용하여 이미지 를로드하는 것을 선호한다.

  1. 이미지 URL 목록을 객체 또는 배열로 가져와야합니다 (예 :

    var sources = { lion: '/assets/lion.png', monkey: '/assets/monkey.png' };

  2. 함수 정의를 정의합니다. 여기서는 이미지 URL 목록과 콜백 함수를 인수 목록에 포함하므로 이미지로드가 완료되면 웹 페이지에서 실행을 시작할 수 있습니다.

    function loadImages(sources, callback) {
                var images = {};
                var loadedImages = 0;
                var numImages = 0;
                for (var src in sources) {
                    numImages++;
                }
                for (var src in sources) {
                    images[src] = new Image();
                    images[src].onload = function () {
                        if (++loadedImages >= numImages) {
                            callback(images);
                        }
                    };
                    images[src].src = sources[src];
                }
            }

  1. 마지막으로 함수를 호출해야합니다. 예를 들어 jQueryDocument Ready 에서 호출 할 수 있습니다.

$(document).ready(function (){ loadImages(sources, buildStage); });




JS를 통해 비동기 미리로드 이미지에 대한 비슷한 대답 이 있습니다. 동적으로로드하는 것은로드하는 것과 동일합니다. 캐시됩니다.

캐싱은 브라우저를 제어 할 수 없지만 서버를 통해 설정할 수 있습니다. 필요에 따라 정말로 신선한 리소스를로드해야하는 경우 캐시 버스터 기술 을 사용하여 새로운 리소스로드를 강제 수행 할 수 있습니다.




Related