JavaScript가 이미지 캐시에 있는지 확인합니다.

Question

현재 jQuery를 사용하여 이미지를로드하고 완전히로드 된 후에 페이드 인합니다. 그러나 이제로드하려는 이미지가 이미 브라우저 캐시에 있는지를 감지하려고합니다. 그런 다음 3 초 후에 표시가 사라질 경우입니다.

아무도 내가 이것을 할 수있는 방법을 알고 있습니까?

Answer 1

캐시에 무엇이 있는지 미리 알려주는 브라우저 기능이 없습니다.

캐시를 원한다면 다음에 사용할 때 캐시 될 가능성이 높지만 이미 캐시 된 것인지 알 수있는 방법이 없습니다.

이미지를로드 한 다음 즉시 로딩할지 여부를 결정할 수 있습니다. 이미지가 1 초 미만 (캐시에서 발생할 가능성이 높음) 이상로드 될 경우 다른 동작 과정을 취합니다. 회로망). 이것은 잠시 동안 onload 핸들러와 setTimeout()을 설정하고 어느 것이 든 먼저 일어나는 것에 중점을 둔다.

언제나 우리가 해결하고자하는 문제점을 설명하면 아마 더 나은 조언을 줄 수 있습니다.

만약 당신이하고 싶은게 있다면 (이것은 질문을 읽는 것으로부터의 추측이다) 3 초 (캐싱 된 경우) 또는로드 될 때마다 (캐싱되지 않은 경우) 이미지를 페이드 아웃하는 것입니다.

근무 데모 : http://jsfiddle.net/jfriend00/XqJpT/

function now() { 
    return (new Date()).getTime(); 
} 

function fadeMe(img, always) { 
    var self = $(img); 
    if (!self.data("faded") && (always || (now() - self.data("baseTime") >= 3000))) { 
     self.fadeIn(); 
     self.data("faded", true); 
    } 
} 

var img = $('<img class="initiallyHidden">') 
    .data({ 
     baseTime: now(), 
     faded: false, 
     loaded: false 
    }) 
    .appendTo(document.body) 
    .load(function() { 
     $(this).data("loaded", true); 
     fadeMe(this, false); 
    }) 
    .attr("src", "http://photos.smugmug.com/photos/344291068_HdnTo-S.jpg"); 

setTimeout(function() { 
    if (img.data("loaded")) { 
     fadeMe(img, true); 
    } 
}, 3000); 

Answer 2

이미지가이 아마도 이미지가 나온 경우 즉시 사실 일 것이다 속성을 "완료"가 당신이 그렇게 같은 코드를 사용할 수 있습니다 은닉처. 당신이 그것을로드하려고하고 캐시에있는 경우 즉시로드처럼

http://www.w3.org/TR/html5/the-img-element.html#dom-img-complete