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

Question

Hi I am using ajax and json for infinite scrolling and then I create a string of html to add to my webpage and call it with jQuery's after() function.

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

Now I need to wait for all the images from my new productHTML string to load and then call another javascript function I created to do some formatting.

I tried like

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

it doesn't work. Can someone help? Thanks

EDIT: after following adeneo's code this is my final result and it works flawlessly.

    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

It's not quite that easy, you'll have to find all the inserted images and wait for them to load individually, something like this

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

It seems like this is working for me

where I generate my html from the json i put an imageCount variable, and then have this counter for imagesLoaded so far set to 0. Then $(img).load() function is getting called after each image load and then I just keep checking to see if imageCount and imagesLoaded is the same.

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