javascript - 使用 ajax + jquery 的 after() 函数，现在等待图像加载

Question

您好，我正在使用 ajax 和 json 进行无限滚动，然后我创建了一个 html 字符串以添加到我的网页并使用 jQuery 的 after() 函数调用它。

  $('.product-panel:last').after(productHTML);

现在我需要等待我的新 productHTML 字符串中的所有图像加载，然后调用我创建的另一个 javascript 函数来进行一些格式化。

我试过

         $('.product-panel:last').after(productHTML).promise().done(function(){
             doMoreStuff();
         }); 

这是行不通的。有人可以帮忙吗？谢谢

编辑:在遵循 adeneo 的代码之后，这是我的最终结果，它完美无缺。

    var productLength = $('.product-panel').length-1;
    $('.product-panel:last').after(productHTML);
    var images   = $(".product-panel:gt("+productLength+")").find('img');
    var promises = [];

    images.each(function(idx, img) {
        var def = $.Deferred();

        img.onload  = def.resolve;
        img.onerror = def.reject;

        if ( img.complete ) def.resolve();

        promises.push(def.promise());
    });

    $.when.apply($, promises).done(function() {
       productHeight();
    });

Answer 1

这不是那么容易，你必须找到所有插入的图像并等待它们单独加载，就像这样

var images   = $('.product-panel:last').after(productHTML).next().find('img');
var promises = [];

images.each(function(idx, img) {
    var def = $.Deferred();

    img.onload  = def.resolve;
    img.onerror = def.reject;

    if ( img.complete ) def.resolve();

    promises.push(def.promise());
});

$.when.apply($, promises).done(function() {
    // all images loaded
});