Загрузка изображений в 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

Что, если вы заменили, вы упростили вещи и использовали это для цикла

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

Это вставит все ваши изображения в порядке.Вы можете добавить атрибуты ширины / высоты.

Answer 2

Не зная соглашения о том, как используется stack, я не совсем уверен, что это сработает, но почему бы вам просто не сохранить информацию индекса в магазине сразу, а не в обратном вызове, когда это будет сделаноloading?

И вам также следует установить src после того, как вы связали load, или он может пропустить.

[полностью пересмотрено с оригинального ответа]

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

Answer 3

хорошо 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("."))
})