jquery callback on new image loaded via ajax call

Question

I m having a function to get the image width and height but that is not responding to the new images being loaded via a ajax call.

The function being -

$('img').on('load',function() {
    console.log(this.width + 'x' + this.height);
});

but i m adding DOM to the page using ajax call but the above code is not responding to the new images being loaded

My example page being here in the link with the console logs.

Regards

I think @Andy you should remove the tag "the question may have a answer here" — Pradyut Bhattacharya, Jul 23 '14 at 11:27

Ramzan Zafar · Answer 1 · 2014-07-23T11:33:03.593

0

you need to do it in this way

$("img").one("load", function() {

}).each(function() {
  if(this.complete){
   console.log(this.width + 'x' + this.height);
 }
});

Updated

$("div.albumList").on("load","img", function() {
      console.log(this.width + 'x' + this.height);

  });

edited Jul 23 '14 at 11:33

answered Jul 23 '14 at 10:39

Ramzan Zafar

1,562
2
17
18

nope this does not help, i m getting 0x0 – Pradyut Bhattacharya Jul 23 '14 at 10:49
can you add your html part as well? – Ramzan Zafar Jul 23 '14 at 10:51
I have edited my question with the example page. – Pradyut Bhattacharya Jul 23 '14 at 11:10

score 0 · Answer 2 · edited May 23 '17 at 10:25

Well it is to be done as said by Rafael Diaz

$.ajax({
        type: "POST",
        url: 'bAlbum.jsp',
        data: null ,
        cache: false,
        success: function(html){
            $('ol#imagelist').append(html);               

            $("ol#imagelist li").each( function (i, e)
            {

               $(e).find('img').one('load', function() {
                   console.log(this.width + 'x' + this.height);
               });
            });
        }
    });

jquery callback on new image loaded via ajax call

2 Answers2