jQuery each（）和load（）排序

Question

我有一个脚本，通过一系列代表图像的JSON对象循环，循环加载图像，一旦它被加载，它会将它附加到我的网站/应用程序中的一个元素上。

图像在JSON中的顺序是正确的，但是它们以不同的顺序出现，这取决于加载速度最快的图像，因为它们是首先附加的。我想确保无论图像加载的顺序如何，它们是总是以正确的顺序（循环表示的顺序）。

我希望最终的方法允许我在加载图像之前访问包装定位点的样式，以显示加载图标。

这里的脚本，我谈论的部分：

$.each(project.images, function (index, image){ 

var image_src = '<?= IMAGE_PATH ?>library/preview/'+ image.file_name; 
var image_markup = $('<img class="new-image" />').attr('src', image_src) 
                .load(function(){ 

    if (this.complete) 
    { 
     var anchor_markup = $('<a href="javascript:void(0)" class="image-anchor" data-image-index="'+ index +'" id="image-index-'+ index +'">'); 
     $(anchor_markup).append(image_markup); 
     globals.markup.image_slider.append(anchor_markup); 
     $('.new-image').fadeIn(200).removeClass("new-image"); 
    } 
}); 
}); 

的例子也可以在http://www.staging.codebycoady.com/work

Answer 1

如果你希望他们以正确的顺序只是追加他们无需等待他们看到加载，隐藏它们，然后在onload回调中切换它们可见。

Answer 2

如果您希望图像以正确的顺序显示，那么您应该监听图像的加载事件，并且一旦加载图像，就会标记它（在某个数组/对象中）加载它。然后显示所有标记为从头开始加载的图像（即，当1,2,3被加载并且4不被加载时，然后在1,2,3上设置显示块，即使5被加载）。