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回调中将它们切换为可见.