how to return a variable inside img.onload = function() in jquery?

Question

Let's get strait to my question:

here is my code:

function inside()
{
    var gallery = $("#gallery");
    var photo = $("#photo");
    var width_mask = gallery.width();    //defines width for mask
    var height_mask = gallery.height();  //defines height for mask
    var img = new Image();
    img.onload = function() {
        var width_image = this.width;
        var height_image = this.height;
        var img_src = img.src;
        if((width_image/width_mask)>=(height_image/height_mask))
        {
            height_image = ((width_mask/width_image)*height_image);
            width_image =  width_mask;
        }
        else if((width_image/width_mask)<(height_image/height_mask))
        {
            width_image = ((height_mask/height_image)*width_image);
            height_image = height_mask;
        }
        var top_margin = (height_mask - height_image)/2;
        var left_margin = (width_mask-width_image)/2;
        photo.css({
            marginTop : top_margin,
            marginLeft: left_margin,
            marginRight: left_margin
        });
        photo.attr('src',img_src);
        photo.attr('width',width_image);
        photo.attr('height',height_image);
        gallery.css({
            width : width_mask,
            height : height_mask
        });
    };
    img.src = photo.attr('src');
}

Ok, as you can see this is my function... here is my question: how I can return "top_margin" and "left_margin" variables inside my img.onload function?

Well, actually I know how we can return variables in a function but in this onload function it seems that it just doesn't work :(

Excuse me, I'm a little beginner in Javascript... any help would be so much appreciated.

Thanks a lot, Naghme

The function is async. What are you trying to do with these variables? — plalx, Nov 02 '13 at 15:14

joonas.fi · Accepted Answer · 2013-11-02T17:38:45.447

You cannot "return a value" from onload, because it's an asynchronous callback.

Well you can, but there is no point, since it's the browser who invokes the onload() callback, and is not interested in its return value.

Asynchronous = Will not be done immediately, but at some point in the future

Synchronous = Will be done immediately

Asynchronicity is dealt with using callbacks. A callback is a mechanism that works by passing a function to another function, so the callee function can inform the caller code about the work being completed, at some time in the future.

If the function worked synchronously, it could simply return the values without a callback. But the drawback would be that the code calling your function would have to wait for the image to be loaded from the server, which could take a long time and would make your program freeze for a long time if the response from the server takes a long time. You don't want to do that.

If you call the inside() function like this:

inside();

You can return a value (or anything) from the onload, as long as you do it asynchronously. You can do it by making these modifications:

function inside(imageLoadedCb) {
    // ...

    img.onload = function () {
        // ...

        // notify the caller of inside() that image was loaded, with the values we want to return
        imageLoadedCb(top_margin, left_margin);
    }
}

inside(
    // this is a function reference. it ends up in "imageLoadedCb" variable in "inside" function
    function (top_margin, left_margin){
        // this code gets invoked from inside the onload() callback
        console.log('top_margin= ' + top_margin + ' left_margin= ' + left_margin);
    }
);

how to return a variable inside img.onload = function() in jquery?

1 Answers1

Linked