Javascript 加载列表（带有图像）时添加回调函数

文档准备好后，我通过ajax调用加载此图像列表：

$.ajax({
        url:'mysite.it/ajax/list_filter.php',
        data:data,
        type:'POST'
    }).done(function(data){
        var response = $.parseJSON(data);
        var people = '';
        if(response.success){ 
            if(response.showcase){
                $.each((response.showcase),function(index,item){
                    people += '<li>';                
                    people += '<img src="'mysite.it/pict_thumbs/' +item.pool_user_pict+ '">';
                    people += '<label>' +item.username+ '</label>';                       
                    people += '</li>';
                });
            }
        }
});

$.ajax({
url:'mysite.it/ajax/list\u filter.php'，
数据：数据，
类型：'POST'
}).完成（功能（数据）{
var响应=$.parseJSON（数据）；
var people=''；
if（response.success）{
if（response.showcase）{
$。每个（（response.showcase）、函数（索引、项）{
人民+=“
”；
人民+=”；
人员+=''+项目。用户名+''；
人民+=”
”；
});
}
}
});

由于列表可能很大，因此我只想在加载和显示所有图像并准备好列表后调用回调函数。
我如何才能做到这一点？？？

函数加载图像（图像，回调）{
function loadImages(images, callback) {
    var length, count, check, i, img;

    length = images.length;
    count = length;

    check = function () {
        if (--count === 0) {
            callback();
        }
    };

    for (i = 0; i < length; i++) {
        img = new Image();

        img.onload = check;
        img.onerror = check;

        img.src = images[i]
    }
}

var images = [], html = '';

$.each(response.showcase, function(index, item) {
    html += '<li>';                
    html += '<img src="mysite.it/pict_thumbs/' + item.pool_user_pict + '">';
    html += '<label>' + item.username + '</label>';                       
    html += '</li>';

    images.push(item.pool_user_pict);
});

loadImages(images, function () {
    $('#some-element').html(html);
});

变量长度、计数、检查、i、img；
长度=图像长度；
计数=长度；
检查=功能（）{
如果（--count==0）{
回调（）；
}
};
对于（i=0；i”；
html+=''；
html+=''+item.username+''；
html+=''；
图片推送（项目池用户图片）；
});
加载图像（图像、函数（）{
$（'#some element'）.html（html）；
});

jshiddle:

我认为这非常适合这里

$.ajax({
        url:'mysite.it/ajax/list_filter.php',
        data:data,
        type:'POST'
    }).done(function(data){
        var response = $.parseJSON(data);
        var people = $('<ul />');
        if(response.success && response.showcase) {
            async.map(response.showcase, function(item, done) {
                var img = new Image();

                //we now install callbacks to certain events
                img.addEventListener('load', function () {
                    done(null, {
                        img: img,
                        username: item.username
                    });
                });

                img.addEventListener('error', function () {
                    done(true);
                });

                //this will kick image loading
                img.src = 'http://mysite.it/pict_thumbs/' + item.pool_user_pict;
            }, function (err, results) {
                if(err) {
                    //images weren't loaded correctly, handle this whatever you like
                    console.error('Something went wrong');
                    return;
                }

                //here you now know that every image you wanted is loaded
                results.forEach(function (data) {
                    var li = $('<li />');
                    li.append(data.img);
                    li.append($('<label />', {
                        html: data.username
                    }));

                    people.append(li);
                });
            });
        }
    });

$.ajax({
url:'mysite.it/ajax/list\u filter.php'，
数据：数据，
类型：'POST'
}).完成（功能（数据）{
var响应=$.parseJSON（数据）；
var people=$（“
”）；
if（response.success&&response.showcase）{
async.map（response.showcase，函数（项目，完成）{
var img=新图像（）；
//我们现在安装对某些事件的回调
img.addEventListener（'load'，函数（）{
完成（空{
img:img，
用户名：item.username
});
});
img.addEventListener（'error'，function（）{
完成（正确）；
});
//这将启动图像加载
img.src=http://mysite.it/pict_thumbs/'+item.pool_user_pict；
}，函数（错误，结果）{
如果（错误）{
//图像加载不正确，请随意处理
console.error（“出了什么问题”）；
返回；
}
//现在，您知道您想要的每个图像都已加载
结果.forEach（函数（数据）{
变量li=$（“
”）；
li.append（data.img）；
li.附加（$（''）{
html:data.username
}));
人物。附加（李）；
});
});
}
});

我使用的方法

async.map

的工作方式是在数组的每个元素上调用它的第二个参数（迭代器），然后等待所有

done

函数被调用

done

函数是一个函数，它获取一个错误作为其第一个参数（

null

，如果没有错误），并且是异步操作的结果-在我们的例子中，是一个加载的图像元素，它被推送到一个新数组

调用完所有

done

s后，async将调用第三个参数（回调），并向其传递一个错误（如果没有错误，则为

null

）和一个从所有异步回调创建的数组。然后我们可以迭代它们，并将图像和用户名附加到html元素中

---

这里有一个fiddle演示了它（使用保存在

response

变量中的假数据）：

您提到的一个可能的副本没有使用Ajax调用underful，至少可以这么说。。。我认为我必须通过计算图像元素来做一些事情，但我没有考虑图像预加载。.onload和.onerror是否在不同浏览器中保持一致？是的，即使在IE8中也应该可以工作。这个答案可能会对您有所帮助：我讨厌使用库，如果我只需要完成一项任务，那么您也可以这样说：使用

$.ajax

而不是

XMLHttpRequest

和

$.parseJSON

而不是

JSON.parse

，特别是以后通过字符串连接构建HTML，这实际上要求使用jQuery。Async是一个专门为这类任务设计的库，使用某人实际编写的工具而不是自己编写的工具没有什么错。