使用ajax + jquery的after()函数，现在等待图片加载完成。

Question

你好，我正在使用ajax和json实现无限滚动，并创建了一个html字符串添加到我的网页中，并通过jQuery的 after() 函数进行调用。

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

现在我需要等待新产品HTML字符串中的所有图像加载完毕，然后调用我创建的另一个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();
    });

- Jay

---

你尝试过使用.load()而不是.after()吗？ - Filthy_Rich

如果我尝试使用load()（不太熟悉）而不是after()，我该如何告诉它在哪里放置我的新HTML字符串？不过现在我会更深入地研究它，看看能否弄清楚。 - Jay

load 是 $ .get 的快捷方式，而 $ .get 又是 $ .ajax 的快捷方式，它与 after 没有任何共同点，后者是一种 DOM 插入方法，例如 append、insertAfter、prepend 等。 - adeneo

可能是 https://dev59.com/mYjca4cB1Zd3GeqP07tf 的重复问题。 - guest271314

我尝试在 after() 之后使用 load()，看起来它能够按照我的预期工作。 - Jay

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
});

- adeneo

---

var def = $.Deferred; 在没有调用 () 的情况下，似乎返回了 def.resolve 的错误信息 "undefined is not a function"。 https://jsfiddle.net/gmjLpk81/ - guest271314

我尝试过但无法使其工作。$.Defered 给了我一个错误。 - Jay

@guest271314 - 这个 fiddle 的问题不仅仅是 $.Deferred，而且 def.resolve 是一个函数，注意我将其引用为回调函数，并且 def.done 不存在。但是它应该有调用，所以我已经添加了，谢谢。 - adeneo

@Jay - 做了一个小改动，请现在试一下。 - adeneo

太棒了！现在它完全按照我的要求工作。我只需要对第一行进行一些微小的更改。 - Jay

Answer 2

看起来这对我有效

在我从JSON生成HTML的地方，我设置了一个imageCount变量，并将已加载图像的计数器设置为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();
        }
    });

- Jay