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?

Answer 1

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?

Answer 2

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.

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

}