等到附加后加载所有图像

Question

我遍历一个json文件，为每个项目调用一个函数loadContent。该函数附加一个img同时填充src属性。我怎么能等到这个循环后加载所有图像才能执行另一个动作？

json.data.map(function(product) {
    loadContent(product);
});

function loadContent(product) {
    $("[data-product-pid-thumb=" + product.id + "]").append('<img src=' + product.image_groups[0].images[0].link + ' />');
}

Answer 1

你可以试试像

这样的承诺

var promises = json.data.map(function (product) {
    return markAvailable(product, lookRequestId);
});
$.when.apply($, promises).then(function () {
    //do your stuff here
})

function markAvailable(product, lookRequestId) {
    var deferred = $.Deferred();
    var $img = $('<img src=' + product.image_groups[0].images[0].link + ' />').appendTo(".qv-overlay-container-" + lookRequestId + " [data-product-pid-thumb=" + product.id + "]");
    $img.on('load error', function () {
        deferred.resolve();
    })
    return deferred.promise();
}