帶圖像預加載的幻燈片顯示一次一個，延時

Question

我想在我正在開發的一個頁面中顯示幻燈片，但它包含大量圖像，總大小超過15 MB。因此，在幻燈片放映開始之前預先加載所有圖像是難以管理的。我希望幻燈片淡入並保持5秒鐘。我希望下一張圖像在前一張圖像顯示時進行預加載。圖片有不同的尺寸，因此下一張圖片在加載後不能隱藏在上一張圖片的後面。任何幫助？ 我想這個代碼，但沒有成功：

var slidesImages = $('.slide_list img'); 
slidesImages.hide(); 
function loadMyImage(){ 

var image = slidesImages.eq(0); 
var image_src = image.attr('data-src'); 

$('<img>').load(function(){ 

    $(".slide").hide().attr('src', image_src).fadeIn("slow"); 
    if(i<slidesImages.length) { 
     slidesImages.splice(0, 1); 
    } else { 
     clearInterval(interval); 
    } 

}).attr('src',image_src); 

} 
var interval = window.setInterval(loadMyImage(), 5000); 

和HTML：

<div align="center"><img class="slide" src="imagens/loading.gif"></div> 
<ul class="slide_list"> 
    <li><img data-src='/zenphoto/albums/pag_inicial_slideshow/20130102_164730.jpg' src='imagens/loading.gif' alt='' title='' height='300'></li> 
    <li><img data-src='/zenphoto/albums/pag_inicial_slideshow/20130102_161616-2.jpg' src='imagens/loading.gif' alt='' title='' height='300'></li> 
    <li><img data-src='/zenphoto/albums/pag_inicial_slideshow/20130102_161048.jpg' src='imagens/loading.gif' alt='' title='' height='300'></li> 
    <li><img data-src='/zenphoto/albums/pag_inicial_slideshow/20130102_154523.jpg' src='imagens/loading.gif' alt='' title='' height='300'></li> 
    <li><img data-src='/zenphoto/albums/pag_inicial_slideshow/20130102_152713.jpg' src='imagens/loading.gif' alt='' title='' height='300'></li> 
    ...     
</ul> 

提前感謝！

Answer 1

我已經測試了一下你的代碼，做了幾處更改並開始工作。

function loadMyImage(obj){ 

     var image = obj.eq(0); 
     var image_src = $(image).attr('data-src'); 

     $('<img>').load(function(){ 

      $(".slide").hide().attr('src', image_src).fadeIn("slow"); 
      if(obj.length) { 
       obj.splice(0, 1); 
      } else { 
       window.clearInterval(interval); 
      } 

     }).attr('src',image_src); 

} 

$(window).load(function() { 
    var slidesImages = $('.slide_list img'); 
    slidesImages.hide(); 
      var interval = window.setInterval(function() { loadMyImage(slidesImages); }, 2000); 
});