jquery variable scope

Question

I have this code in jquery:

var ratio;
$("<img/>").attr("src", $(img).attr("src")).load(function() {
ratio = this.width / this.height;
    alert(ratio);
});

This retuns the correct ratio, but when I try this

var ratio;
$("<img/>").attr("src", $(img).attr("src")).load(function() {
ratio = this.width / this.height;        
});
alert(ratio);

It returns undefined.

I do not understand why this happens even though I have declared globally the ratio variable.

I use this in the following exemple:

working http://jsfiddle.net/7sUAY/5/

not working http://jsfiddle.net/7sUAY/6/

Thank you, Mugur

Because the load callback is executed only when the image was loaded, whereas every code following $("<img/>").attr().load() is executed immediately. Otherwise, what would be the reason to provide a callback at all? — Felix Kling
– Felix Kling, Commented Feb 9, 2012 at 11:34

Rich O'Kelly · Accepted Answer · 2012-02-09 11:35:21Z

2

You only assign a value to ratio inside a callback (passed to the load function). This callback will be made when the image has loaded. It will not have been made before the point where ratio is alerted and so ratio remains undefined.

See here for the load method documentation.

answered Feb 9, 2012 at 11:35

Rich O'Kelly

41.8k9 gold badges87 silver badges114 bronze badges

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

Comments

mas-designs · Accepted Answer · 2012-02-09 11:35:52Z

2

That's because the .load() method takes more time. Your alert is executed faster than the image has been loaded.

answered Feb 9, 2012 at 11:35

mas-designs

7,5311 gold badge33 silver badges56 bronze badges

Collectives™ on Stack Overflow

jquery variable scope

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related