2

我有一个脚本，它遍历一系列代表图像的 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看到

4

2 回答 2

5

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.

于 2012-06-05T13:44:41.623 回答
1

如果您希望图像以正确的顺序出现，那么您应该侦听图像的加载事件，一旦加载图像，您就标记它（在某些数组/对象中）它已加载。然后显示所有标记为从头开始加载的图像（即，当加载了 1、2、3 而未加载 4 时，则在 1、2、3 上设置显示块，即使刚刚加载了 5）。

于 2012-06-05T13:45:52.300 回答