Question

I am in a situation that needs be solve with this way; need convert a local variable to a global variable. There is an example returning image’s real width and height which i found these method from this answer..

Need to convert local varialbes pic_real_height and pic_real_width to global variables with returning their true values.

Here is jsFiddle.

CSS :

img { width:0px; height:0px; }​

jQuery :

console.log($('.imgCon img').height());//returns 0

var img = $('.imgCon img')[0]; // Get my img elem
var pic_real_width, pic_real_height;
$('<img/>').attr('src', $(img).attr('src')).load(function() {
        pic_real_width = this.width;   
        pic_real_height = this.height;

        console.log( pic_real_width + 'x' + pic_real_height );
        // -- returns true 570x320 --
});
//problem starts here:
console.log( pic_real_width + 'x' + pic_real_height );
//returns undefined
// need to return this as an global variable 570x320

Answer 1

This line,

console.log( pic_real_width + 'x' + pic_real_height );

does not wait for these lines

    pic_real_width = this.width;   
    pic_real_height = this.height;

    console.log( pic_real_width + 'x' + pic_real_height );
    // -- returns true 570x320 -- 

to execute, because its asynchronous.

Thus,
console.log( pic_real_width + 'x' + pic_real_height ); executes before callback function gets called (i.e. before you set the width and height ).

Since, you havent defined them already, they show undefined.

A trivial solution would be,

$('<img/>').attr('src', $(img).attr('src')).load(function() {
        pic_real_width = this.width;   
        pic_real_height = this.height;

        console.log( pic_real_width + 'x' + pic_real_height );
        // -- returns true 570x320 --
        restOfMyProcessing();

}); 

function restOfMyProcessing() {
    console.log( pic_real_width + 'x' + pic_real_height );
}