비동기 적으로로드 된 이미지가 포함 된 jQuery 슬라이드 쇼 루프

Question

처음에는 모든 이미지를로드하지 않는 간단한 jQuery 슬라이드 쇼를 만들려고하는데 사용되는 다음 이미지는 비동기 적으로로드되어 페이지 크기를 줄입니다.

슬라이드 쇼가 작동 하나 다음 이미지의 미리로드가 제대로 작동하지 않는 것 같습니다.

Exaple jQuery를 이슈

다음 이미지를로드해야합니다 프리로드 댓글 아래에 라인의

var i = 2; 
var total = 9; 

var obj = setInterval(function(){  

    $(".slides_container img").fadeOut("slow", function(){ 
     $(this).attr("src" ,"/images/slide-" + i + ".jpg").load(function() { 
      $(this).fadeIn(); 
     }); 
    }); 

    if(i < total){ 
     i++; 
     //Preload Next Image 
     (new Image()).src = "/images/slide-" + i + ".jpg"; 
    } 
    else 
     i = 1; 
}, 4000); 

가능한 원인 그러나 코드는 아래에 강조 캐시 된 이미지를 사용하지 보이지만 대신 서버에서 다시 가져 오십시오.

나는 제대로

$(this).attr("src" ,"/images/slide-" + i + ".jpg").load(function() { 
    $(this).fadeIn(); 
}); 

Answer 1

$(this).attr("src" ,"/images/slide-" + i + ".jpg").load(function() { 
    $(this).fadeIn(); 
}); 

될해야 .fadeIn() 작품을 만들기 위해 .load()를 사용 했어 :

$(this).load(function() { 
    $(this).fadeIn(); 
}); 

$(this).attr("src" ,"/images/slide-" + i + ".jpg") 

을 또는 시도 :

$(this).onload = function() { 
    .... 
})