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

If I try to use load() (not very familiar with) and not after(), how would I tell it where to place my new html string? I'll look into it more now though to see if I can figure it out — Jay, Aug 15 '15 at 18:18
If you can see something that you'd be able to check with `.load()`, then run `.after()` then you could possible do it that way. Good luck, let me know how it goes. — Filthy_Rich, Aug 15 '15 at 18:20
`load` is a shortcut for `$.get`, which is a shortcut for `$.ajax`, it has nothing in common with `after` which is a DOM insertion method, like `append`, `insertAfter`, `prepend` etc ? — adeneo, Aug 15 '15 at 18:22
And still with `load` the result would be the same, it waits for the ajax call to complete, not the inserted images to load. — adeneo, Aug 15 '15 at 18:23
Possible duplicate of http://stackoverflow.com/questions/29044852/preloading-images-in-html/ — guest271314, Aug 15 '15 at 18:48
i tried load() after after() and it seems to work how i wanted. — Jay, Aug 15 '15 at 19:36

adeneo · Accepted Answer · 2015-08-15T19:40:57.873

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

edited Aug 15 '15 at 19:40

answered Aug 15 '15 at 18:19

adeneo

312,895
29
395
388

`var def = $.Deferred;` without invocation `()` appear to return `undefined is not a function ` at `def.resolve` https://jsfiddle.net/gmjLpk81/ – guest271314 Aug 15 '15 at 18:59
i tried but couldn't get it to work. $.Defered was giving me an error – Jay Aug 15 '15 at 19:35
1

@guest271314 - it's not just the `$.Deferred` that's the issue with that fiddle, it's the fact that `def.resolve` is a function, note that I have it referenced as a callback function, and `def.done` doesn't exist. But it should have the invocation, so I've added that, thanks. – adeneo Aug 15 '15 at 19:41
@Jay - Made a slight change, try it now. – adeneo Aug 15 '15 at 19:42
Amazing! it works exactly how I wanted now. I had to make some minor changes to the first line – Jay Aug 15 '15 at 20:55

score 0 · Answer 2 · answered Aug 15 '15 at 19:34

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

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

2 Answers2