jQuery로 다음 x 이미지 미리로드 및 캐시

Question

I 현재 표시된 이미지 (전체 화면 슬라이드 쇼) 이후에 다음 X 이미지를 동적으로 미리로드하고 캐시해야합니다.
나는 지금까지 발견 한 모든 방법을 시도했으며 브라우저는 여전히 캐싱하지 않습니다.

참고 # 1 : 관계가 있는지는 모르겠지만 사진은 좋은 날에 적어도 각각 2MB입니다.

어떻게 사전로드 및 캐싱 t 그에게하고 이미지

방법 # 1 :

$('<img/>').attr({ 
    src: list[url] 
}).load(function() { 
    alert("I have preloaded your next image."); 
}); 

방법 # 2 :

next_img = new Image() 
next_img.src=list[url]; 
next_img.onload=function(){ alert("I have preloaded your next image."); } 

방법 # 3 :

$('<img/>')[0].src = list[url]; 

내 브라우저 콘솔에 표시되는 내용은 알림을 통해 알려주므로 실제로로드 된 것입니다.

하지만 내 jQuery 기능을 사용하는 경우 전체 화면에 표시되는 이미지의 'src'를 변경하려면 콘솔에서 사진을 다시 다운로드하고 캐시를 언급하지 않은 상태에서 3을 통해 알 수 있습니다. 위의 방금로드 된 그림의 로딩의 -4 초.

편집 :

내가 모든 브라우저에서 캐싱을 경험하지하고있다.
모든 이미지는 MaxCDN에서 가져옵니다.

편집 # 2 : 또래 위치 중 하나에

그들은 낳게 될 수있는 문제.

Answer 1

div 요소의 자식으로 이미지를 요청하고로드하는 방법과 div를 보이는 화면 영역에서 절대 배치하는 방법은 어떻습니까?

예 : 자사가 이미 페이지에로드로

JavaScript: 
var arrImages = {}; 
var image = new Image(); 
var image.onload = function() { 
    $('.imageContainerDiv').append(this); 
    arrImages[this.src] = this; 
} 
image.src = imageURL; 

Css: 
.imageContainerDiv { 
    position: absolute; 
    width: 0; 
    height: 0; 
    overflow: hidden; 
    top: -1024px; 
    left: -1024px; 
} 

이 방법은 arrImages의 이미지를 참조 다음 번에 이미지가 브라우저 캐시/메모리에서 발탁한다.

Answer 2

서로 다른 z- 색인을 사용하여 이미지를 겹치게하면 어떨까요?

처럼 :

.image_top {position:absolute; left:0px; top:0px; z-index:100;} 
.image {position:absolute; left:0px; top:0px; z-index:0;} 

표시됩니다 이미지 :

images[0].className = "image_top";