Can't get ajax - loaded image's height and width via jquery

Question

I'm loading an image exteranlly via ajax like so...

function load_image(image_href) {

    var img = new Image();
    $(img).load(function () { 
        $(this).hide(); $('#a_box').append(this); 
        $(this).fadeIn(); 
        }, gallery_image_load_complete()
    ).error(function () {
    }).attr('src', image_href);

}

function gallery_image_load_complete() {
    conslole.log('complete')

     $('#a_box img').height(); //wrong numbers, as though the image is partially loaded
     $('#a_box img').width(); //wrong numbers
}

The problem is I'm trying to get the loaded image's height and width inside the function gallery_image_load_complete(). For some reason, this image height and width are off, it's astohugh the image hasn't fully loaded.

Can someone help me out please?

The first parameter of the load method should be the URL, which seems to be missing. Could explain the problem. — JohnFx
– JohnFx, Commented Apr 21, 2010 at 22:09

Jeffery To · Accepted Answer · 2010-04-22 06:15:40Z

3

gallery_image_load_complete() needs to be called within the load event handler:

function load_image(image_href) {

    var img = new Image();
    $(img).load(function () { 
        $(this).hide(); $('#a_box').append(this); 
        $(this).fadeIn(); 
        gallery_image_load_complete(); // now inside the load event handler
    }).error(function () {
    }).attr('src', image_href);

}

answered Apr 22, 2010 at 6:15

Jeffery To

12k1 gold badge29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JohnFx · Accepted Answer · 2010-04-21 21:37:56Z

2

You do know that the height and width attributes tell you the size of the image object in the DOM, not the underlying image files themselves, right?

answered Apr 21, 2010 at 21:37

JohnFx

35k19 gold badges108 silver badges169 bronze badges

1 Comment

CafeHey Over a year ago

but I have nothing resizing the image, no css, script or restrictions on it whatsoever. It's height in the dom should be it's actual height.

Sky Sanders · Accepted Answer · 2010-04-22 00:16:14Z

1

I don't have the code handy right now, but when I needed the size of an arbitrary image in order to decide how to present it, I preload in a hidden element and get the size of the element @ loaded. then do what you will and place the image where it is needed.

works well.

answered Apr 22, 2010 at 0:16

Sky Sanders

37.2k9 gold badges71 silver badges91 bronze badges

Collectives™ on Stack Overflow

Can't get ajax - loaded image's height and width via jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related