在js中加載圖像以便非連續加載循環加載

Question

目前，我在一個頁面上加載了3或4個圖庫。這是一個攝影師網站，所以每個畫廊都有大約40張圖片。我最初預加載的圖像，我只是加載前兩個圖像，以便頁面快速加載，然後在後臺使用JS循環通過一個循環，並加載其餘的。它運作良好，除了它不遵守命令，命令很重要。我已經看到了一些隱藏圖像的示例，直到它們加載完畢，但由於頁面中加載了大約120個大圖像，導致頁面加載緩慢。有沒有一種方法可以使用我的代碼，並在加載後對圖像進行排序？或者，我應該通過一個數組加載它們，它會不會忽略加載順序？這裏是我的jsfiddle：http://jsfiddle.net/drrobotnik/YKPEu/

這件作品JS我在看大多是這一部分：

var stack = []; 
for (var i = 3; i <= 59; i++) { 
     var img = new Image(782,521); 
     img.src = 'http://anikalondon.com/Images/weddings/weddings-3-' + i + '.jpg'; 
     $(img).bind('load', function() { 
      stack.push(this); 
      var len = stack.length+2; 
      $(".numbers").text(($(".enggal img:visible").index()+1)+"/"+len); 
      if(i>=58){$(".numbers").css("visibility", "visible");} 
     }); 
    } 

再次，在這個例子中它加載圖像按順序（可能是取其那些負載第一，不知道）。

Answer 1

以及IDK的，如果有幫助，但這裏有一個排序算法，你可以使用它們插入到DOM

stack.sort(function(a,b){ 
    return a.src.substring(a.src.lastIndexOf("-")+1,a.src.lastIndexOf(".")) - b.src.substring(b.src.lastIndexOf("-")+1,b.src.lastIndexOf(".")) 
}) 

Answer 2

之前對它們進行排序如果您更換您簡化的東西，用這個循環

for (var i = 3; i <= 59; i++) 
{ 
    $(".enggal").append("<img src='http://anikalondon.com/Images/weddings/weddings-3-" + i + ".jpg' />");  
} 

這將按順序插入所有圖像。您可能想要添加寬度/高度屬性。

Answer 3

不知道如何處理stack，我不完全確定這會起作用，但爲什麼不直接將索引信息保存到商店，而是在完成加載時將其保存在回調中？

你也應該在綁定load之後設置src，否則它可能會錯過。

[從原來的答案完全修訂]

var img,i,stack = []; 

var imageLoaded=function(e) { 
    var len = stack.length+2, 
     index = parseInt(this.src.split('-')[2])-3 
    $(".numbers").text(($(".enggal img:visible").index()+1)+"/"+len); 
    if(index>=58){$(".numbers").css("visibility", "visible");} 
} 

for (i = 3; i <= 59; i++) { 
     img = new Image(782,521); 
     $(img).bind('load', imageLoaded); 
     stack.push(img); 
} 

// Just to make sure that the first image doesn't finish loading before the loop isdone 
// throwing off the count in the imageLoaded function 

for (i = 3; i <= 59; i++) { 
    stack[i-3].src = 'http://anikalondon.com/Images/weddings/weddings-3-' + i + '.jpg'; 
}