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）。 / p>

jQuery each（）和load（）排序

2 个答案: