Question

对于photogalery我加载一个文件（通过ajax），它返回我想要显示的图像的src数组。它们必须按照ajax调用返回的确切顺序显示。

我正在使用一个带有.load()函数的for循环，但这样就不会同步了。如果我在.load()函数中输出i的值，它不会变为0,1,3,4等，而是0,3,2,4等。

我的代码的简化版本：

$.get('photostack.php', {album_name:album_name} , function(data) {
var items_count = data.length;
for(var i = 0; i < items_count; ++i){
    var item_source = data[i];
    var cnt = 0;
    $('<img />').load(function(){
        var $image = $(this);
        ++cnt;
        console.log(i);
        $ps_container.append($image);
    }).attr('src',item_source).attr('class',i);
}
},'json');

console.log(i)现在给出了错误的顺序。它应该是完全提升的。

我尝试了很多东西。使用对象作为cnt / i的变量等延迟每个负载100毫秒，但没有一个工作。

Answer 1

这是因为.load的异步性质。您无法预测何时将调用回调函数。要同步它们，请使用Deferred object

Answer 2

不确定我是否真的得到它，但也许这样的事情会起作用：

$.get('photostack.php', {album_name:album_name} , function(data) {
    for(var i = 0; i < data.length; i++){
        var image = new Image();
            image.src = data[i];
            image.className = i;
            image.style.display = 'none';
        $(image).appendTo($ps_container).load(function() {
            $(this).show();
        });
    }
},'json');

试图在jQuery中同步.load（） - 无法正常工作

2 个答案: