How do I check if all images of appended HTML are loaded?

Question

How do I check if all images of appended HTML are loaded? The code looks like this:

$.ajax({
    url: "../api/listings",
    type: 'GET',
    success: function (html) {
        $('#container').append(html);
    };
});

$newItems contains some IMG's. I need to run a function after they are loaded. I tried adding this to success function: $('#container').on('load', function(){console.log('hello world!')}); but it didn't work

ur code looks good to me. 'html' is having the ref of images?? — Newton Sheikh, Sep 05 '13 at 14:16
@Itay that artice doesn't says how check if images are loaded for appended element — Edmund Sulzanok, Sep 05 '13 at 14:21
Well you can just change it to ` $('#container img').load(...);` — Itay, Sep 05 '13 at 14:24
@Itay .load() method is deprecated since jQuery Version 1.8. Now it's `.on('load', function(){...})` But yeah it worked. I could swear I tried it before asking, probably did something diffrerent — Edmund Sulzanok, Sep 05 '13 at 18:39

score 1 · Accepted Answer · answered Sep 05 '13 at 18:44

1

$.ajax({
    url: "../api/listings",
    type: 'GET',
    success: function (html) {
        $('#container').append(html);
        $('#container img').on('load', function(){console.log('images loaded')});
    };
});

answered Sep 05 '13 at 18:44

Edmund Sulzanok

1,883
3
20
39

score 0 · Answer 2 · answered Sep 05 '13 at 14:16

0

Try something like this. Create a global variable like this var allImagesLoaded = true; then on the appended HTML add an onerror handler which set the global variable to false. Check it out after a time-out or something like that

answered Sep 05 '13 at 14:16

naveen

53,448
46
161
251

score 0 · Answer 3 · answered Sep 05 '13 at 14:19

0

Take a look at this library : https://github.com/desandro/imagesloaded/

It allows you to listen for loaded images in a particular element.

Such as :

$('#container').imagesLoaded(function(){
 console.log("All images loaded!");
})

answered Sep 05 '13 at 14:19

Rob Schmuecker

8,934
2
18
34

How do I check if all images of appended HTML are loaded?

3 Answers3