Loading images in js for loop loads nonsequentially

Currently I have 3 or 4 galleries loaded on one page. It's a photographers site, so each gallery has about 40 images. I originally pre-loaded the images, where I would just load the first two images so the page loads quickly, then use JS in the background to cycle through a loop and load the rest. It worked well, except that it didn't honor the order, and the order is important. I have seen some examples where you hide the images until they load, but since there are about 120 large images being loaded in the page it causes the page to load slowly. Is there a way I can use my code, and sort the images once they're loaded? Or, should I load them through an array, would it still ignore the load order? Here's my jsfiddle: http://jsfiddle.net/drrobotnik/YKPEu/

The piece of js i am looking at mostly is this part:

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

again, in this example it's loading the images out of order (probably whichever ones load first, not sure).

---

well idk if it helps but here's a sorting algorithm that you could use to order them before inserting them into the 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("."))
})

---

What if you replaced you simplify things and use this for loop

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

This inserts all of your images in order. You may want to add in the width/height attributes.

---

Without knowing the deal with how stack is used, I'm not totally sure this would work, but why don't you just save the index information to a store right away, rather than on the callback when it's done loading?

And you should also set src after you bind load or it might miss.

[totally revised from original answer]

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';
}