jQuery each（）和load（）排序 [英] jQuery each() and load() ordering

问题描述

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

I have a script that loops through a series of JSON objects that represent images, the loop loads an image and once it has been loaded it appends it to an element on my website/application.

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

The images are in the correct order in the JSON however they are appearing in different orders depending on the images that load the quickest because they are appended first. I want to make sure that whatever order the images load, they are always in the correct order (The order that the loop denotes).

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

The method I'm hoping to end up with allow me to access the style of the wrapping anchor before the image is loaded to show a loading icon also.

这是部分我正在谈论的脚本：

Here's the part of the script that I am talking about:

$.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

推荐答案

如果你想要它们按正确的顺序添加它们而不等待它们加载，隐藏它们然后在onload回调中将它们切换为可见。

If you want them in the correct order just append them without waiting for them to load, hide them and then in the onload callback toggle them visible.

这篇关于jQuery each（）和load（）排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！