jQuery幻燈片循環與異步加載的圖像

我想創建一個簡單的jQuery幻燈片，不會在開始時加載所有圖像，要使用的下一個圖像將被異步加載以減小頁面大小。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);

問題

預加載評論下方，該行必須加載下一個圖像的可能原因，不過代碼高亮下方似乎沒有使用任何緩存圖像，但而是再次從服務器拉他們？

我不得不使用使.fadeIn()正常工作

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

來源

2013-02-21 Dan

您需要連接加載事件befo你需要指定SRC。 – 2013-02-21 19:35:07

@Diodeus如何在貨物內訂購？ $（「。slides_container img」）。fadeOut（「slow」，function（）{（this）.load（function（）{（「。slides_container img」）。attr（「src」，「/圖像/滑動/運行slide- 「+ 1 +」 .JPG 「）; \t \t \t \t $（」 IMG slides_container「）淡入（）; }）; }）; ' – Dan 2013-02-21 19:39:55

$（this）.load（...）;在一行中，然後設置SRC是第二個。您可以運行到圖像緩存並在事件處理程序註冊之前加載的情況。 – 2013-02-21 19:42:23

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

應該是：

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

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

或者試試：

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

來源

2013-02-21 19:55:29

我通常通過直線JS來做到這一點。嘗試「加載」而不是「加載」。 – 2013-02-21 20:04:25

它現在工作很好，我想：http://iwouldrun500miles.com，感謝您的幫助！ – Dan 2013-02-21 20:07:37

jQuery幻燈片循環與異步加載的圖像

回答

相關問題