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

Question

您好，我正在使用 ajax 和 json 进行无限滚动，然后我创建了一个 html 的字符串以添加到我的网页并使用 jQuery 调用它s 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
});

Answer 2

这似乎对我有用

我从 json 生成我的 html 我放了一个 imageCount 变量，然后将 imagesLoaded 的这个计数器设置为 0。然后 $(img).load() 函数在每次图像加载后被调用，然后我只是继续检查 imageCount 和 imagesLoaded 是否相同。

    var imagesLoaded = 0;
    $('.product-panel:last').after(productHTML);
    $('img').load( function() {
        imagesLoaded++;
        if(imagesLoaded == imageCount){
            console.log("all images loaded");
            productHeight();
        }
    });

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

using ajax + jquery's after() function, now wait for images to load

javascript

ajax

jquery

jquery-after