js for 루프로드 이미지를 순차적으로로드하지 않습니다.

Question

현재 한 페이지에 3 ~ 4 개의 갤러리가로드되어 있습니다. 그것은 사진 작가 사이트이므로 각 갤러리에는 약 40 개의 이미지가 있습니다. 원래 이미지를 미리로드 했으므로 처음 두 이미지를로드하여 페이지가 빠르게로드 된 다음 백그라운드에서 JS를 사용하여 루프를 순환하고 나머지를로드합니다. 그것은 순서를 존중하지 않았다는 것을 제외하고는 잘 작동했고, 순서는 중요합니다. 이미지가로드 될 때까지 이미지를 숨기는 예제를 보았습니다.하지만 약 120 개의 큰 이미지가 페이지에로드되어 있기 때문에 페이지가 느리게로드됩니다. 내 코드를 사용하고로드 된 이미지를 정렬 할 수있는 방법이 있습니까? 또는 배열을 통해로드해야합니까? 여전히로드 순서를 무시합니까? 이 예에서 처음 아마 어느 것을 부하 (순서가 이미지를로드하는 것, 다시, 확실하지

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");} 
     }); 
    } 

:

내가 주로에서 찾고 JS의 조각이 부분입니다 http://jsfiddle.net/drrobotnik/YKPEu/ : 여기 내 jsfiddle입니다). 그것이 도움이되지만 여기에 당신이 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 1

잘은 나도 몰라 무엇을 당신이 일을 단순화하고 루프

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

이를 사용하여 교체하는 경우

이렇게하면 모든 이미지가 순서대로 삽입됩니다. 너비/높이 특성을 추가 할 수 있습니다.

Answer 2

에 삽입하기 전에 주문을 사용할 수있는 정렬 알고리즘의 경우

Answer 3

stack을 사용하는 방법을 알지 못해도 제대로 작동하지 않을 수 있습니다. 그러나로드가 완료되면 콜백 대신 인덱스 정보를 저장하기 만하면됩니다. ?

로드를 바인드 한 후에도 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'; 
}