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

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

}