복붙노트

[JQUERY] 어떻게 자바 스크립트에서 이미지를 캐시 않는다

JQUERY

어떻게 자바 스크립트에서 이미지를 캐시 않는다

해결법

  1. 1.이미지가 브라우저에 어떤 방식으로로드 된 후에는 브라우저 캐시에있을 것입니다 훨씬 빨리 그 사용 한 이미지가 그대로 현재 페이지 또는 다른 페이지에 있는지 여부를 사용하는 다음 번에로드 이 브라우저 캐시에서 만료되기 전에 사용.

    이미지가 브라우저에 어떤 방식으로로드 된 후에는 브라우저 캐시에있을 것입니다 훨씬 빨리 그 사용 한 이미지가 그대로 현재 페이지 또는 다른 페이지에 있는지 여부를 사용하는 다음 번에로드 이 브라우저 캐시에서 만료되기 전에 사용.

    그래서, 미리 캐시 이미지에, 당신이해야 할 모든 브라우저에로드 그들이다. 당신은 이미지의 무리를 미리 캐시하려면 자바 스크립트에서 할 때 일반적으로 페이지로드를 보유하지 않습니다, 그것은 자바 스크립트와 함께 할 아마 가장 좋습니다. 이 같은 것을 할 수 있습니다 :

    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);

  2. 2.@Pointy 당신이 자바 스크립트를하지 캐시 이미지를 할 말했듯이, 브라우저는 않습니다. 그래서 이것은 당신이 요구하고하지 않을 수 있습니다 무엇을 할 수있다 ...하지만 당신은 자바 스크립트를 사용하여 이미지를 미리로드 할 수 있습니다. 배열에 프리로드에 당신이 원하는 모든 이미지를 넣어 숨겨진 IMG 요소에 해당 배열의 모든 이미지를 넣어, 당신은 효과적으로 이미지를 미리로드 (또는 캐시).

    @Pointy 당신이 자바 스크립트를하지 캐시 이미지를 할 말했듯이, 브라우저는 않습니다. 그래서 이것은 당신이 요구하고하지 않을 수 있습니다 무엇을 할 수있다 ...하지만 당신은 자바 스크립트를 사용하여 이미지를 미리로드 할 수 있습니다. 배열에 프리로드에 당신이 원하는 모든 이미지를 넣어 숨겨진 IMG 요소에 해당 배열의 모든 이미지를 넣어, 당신은 효과적으로 이미지를 미리로드 (또는 캐시).

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

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

  3. 3.당신이 볼 수있는 몇 가지가있다 :

    당신이 볼 수있는 몇 가지가있다 :

    이미지를 사전로드 htaccess로 파일에 캐시 시간 설정 그들을 인코딩 이미지와 base64로의 파일 크기입니다.

    미리로드 : http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

    캐싱 : http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html

    다른 사람들이 "인식"로딩이 더 낫다고 말할 때 base64 인코딩을위한 몇 가지 다른 생각, HTTP 요청 대역폭 수렁에 몇 가지 말씀이 있습니다. 나는 공중에이를 떠날거야.

  4. 4.귀하의 질문에 "자바 스크립트를 사용하여"라고하더라도, 당신은 어떤 자산을 미리로드 할 수있는 링크 태그의 프리 페치 속성을 사용할 수 있습니다. (2016년 8월 10일)이 글을 쓰는 현재로는 사파리에서 지원하지만, 거의 모든 곳입니다되지 않습니다

    귀하의 질문에 "자바 스크립트를 사용하여"라고하더라도, 당신은 어떤 자산을 미리로드 할 수있는 링크 태그의 프리 페치 속성을 사용할 수 있습니다. (2016년 8월 10일)이 글을 쓰는 현재로는 사파리에서 지원하지만, 거의 모든 곳입니다되지 않습니다

    <링크 REL = "페치"HREF = "(URL)">

    여기 지원에 대한 자세한 정보 : http://caniuse.com/#search=prefetch

    마이크로 소프트는 그들에 대한 지원을 중단했기 때문에 IE 9, 10은 caniuse 매트릭스에 표시되지 않습니다.

    당신이 정말로 자바 스크립트를 사용하여에 붙어 있었다 그렇다면, 당신은뿐만 아니라 페이지에 이러한 요소를 동적으로 추가로 jQuery를 사용할 수 있습니다 ;-)

  5. 5.내가 JS를 통해 비동기 사전로드 이미지의 비슷한 답을 가지고있다. 동적으로로드하면 일반적으로 그들을로드와 동일합니다. 그들은 캐시합니다.

    내가 JS를 통해 비동기 사전로드 이미지의 비슷한 답을 가지고있다. 동적으로로드하면 일반적으로 그들을로드와 동일합니다. 그들은 캐시합니다.

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

  6. 6.나는 lazyload 이미지에 유사한 기술을 사용하지만, 도움이되지만 통지 자바 스크립트가 먼저로드의 브라우저 캐시에 액세스하지 않습니다 할 수 없습니다.

    나는 lazyload 이미지에 유사한 기술을 사용하지만, 도움이되지만 통지 자바 스크립트가 먼저로드의 브라우저 캐시에 액세스하지 않습니다 할 수 없습니다.

    내 예 :

    나는 다음 이미지 자바 스크립트로드보다 2 초, 등을 기다립니다, 4 개 이미지 슬라이더 대기 이초 내 홈페이지에 회전 배너를

    이러한 이미지는 그들이 년 동안 브라우저에서 캐시합니다 헤더를 캐싱받을 수 있도록 내가 수정할 때마다 변경하는 것이 고유 URL이 있습니다.

    max-age: 31536000, public

    지금은 크롬 DevTools로를 열고 확인 드 '사용 안 함 캐시'옵션이 활성화되어 있지하고 (캐시를 제거 후)에 처음으로 페이지를로드 모든 이미지는 가져 오기 및 200 개 상태가 얻을 때. 배너의 모든 이미지의 전체주기 후 네트워크 요청을 중지하고 캐시 된 이미지가 사용된다.

    나는 정기적으로 새로 고침을하거나 서브 페이지로 이동하고 다시 클릭하면 이제 캐시에있는 이미지는 무시 될 것으로 보인다. 나는 크롬 DevTools로의 네트워크 탭에서 "디스크 캐시에서"회색 메시지를 볼 것으로 예상한다. 대신에 내가 요청이 대신 회색의 그린 상태 원으로 2 초마다 통과 참조, 나는 그것이 내가 캐시 자바 스크립트에서 전혀 접근하지 않는 인상을 얻을 수 있도록 데이터가 전송되는 참조하십시오. 그것은 단순히 이미지를 페이지가로드되는 각 시간을 가져옵니다.

    홈페이지에 각 요청에 관계없이 이미지의 캐싱 정책의 4 개 요청을 트리거 그래서.

    이제 위의 함께 새로운 http2 표준 지원을 대부분의 웹 서버와 브라우저를 고려, 나는 그것이 http2 이후 lazyloading 것은 거의 동시에 모든 이미지를로드 사용을 중지하는 것이 낫다 생각합니다.

    이 크롬 DevTools로 버그가 있다면 정말 내 아무도 아직이 눈치 놀라움. ;)

    이것이 사실이라면, 게으른 로딩을 사용하는 경우에만 대역폭 사용을 증가시킵니다.

    내가 틀렸다면 수정하십시오. :)

  7. 7.답변의 완전성에 대한 추가 : HTML로 사전로드

    답변의 완전성에 대한 추가 : HTML로 사전로드

    <link rel="preload" href="bg-image-wide.png" as="image">

    기타 미리로드 기능은 존재하지만, 아무도 <링크 확인해 = "프리로드"> 등의 목적에 맞는로 확실히되지 않습니다 :

    이 거기 스크립트 기반 자원 로더의 수는 있지만, 그들은의이 우선 순위 큐를 가져 브라우저를 통해 모든 전원이 공급되지 않고, 거의 같은 성능 문제가 될 수 있습니다.

    출처 : https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

  8. 8.예, 브라우저가 자동으로 당신을 위해 이미지를 캐시합니다.

    예, 브라우저가 자동으로 당신을 위해 이미지를 캐시합니다.

    당신은, 그러나, 이미지 캐시가 만료되도록 설정할 수 있습니다. 이 스택 오버플로 질문과 답을 체크 아웃 :

    정적 이미지에 캐시 만료

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

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

    함수 loadImages (소스 콜백) { VAR 이미지 = {}; VAR의 loadedImages = 0; VAR의 numImages = 0; (소스에 var에 SRC) {에 대한 numImages ++; } (소스에 var에 SRC) {에 대한 이미지 [SRC = 새 이미지 (); 이미지 [SRC] .onload = 함수 () { 경우 (++ loadedImages> = numImages) { (이미지) 콜백; } }; 이미지 [SRC]하려면 .src = 소스 [SRC]; } }

    $ (문서) .ready (함수 () { loadImages (소스 buildStage); });

  10. 10.요즘 캐시에 구글에 의해 제안 및 이미지 렌더링 프로세스를 개선 새로운 기술이있다 :

    요즘 캐시에 구글에 의해 제안 및 이미지 렌더링 프로세스를 개선 새로운 기술이있다 :

    11. from https://stackoverflow.com/questions/10240110/how-do-you-cache-an-image-in-javascript by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 업로드 파일 전에 파일 확장자의 검증  (0) 2020.10.13
[JQUERY] 이벤트가 요소에 있는지 확인 [중복]  (0) 2020.10.13
[JQUERY] HTML 태그를 제거하지만 innerHTML을 유지  (0) 2020.10.13
[JQUERY] 이벤트 핸들러 jQuery를 요소에 결합되는 경우 시험 [중복]  (0) 2020.10.13
[JQUERY] 어떻게 각도 4 jQuery를 플러그인을 사용 하는가?  (0) 2020.10.13
,

티스토리툴바