javascript - Why am I not getting image width and height after loading? -

i image element. let user upload image. after upload, process image. want load processed image , show it. getting , show image fine.

i need know width , height of image loaded.

i doing correctly below , should work not sure why width , height zero:

html:

<img id="photo" src=""> 

js:

    var id = 1000;     var img = $("#photo").attr('src', '/photo/get/' + id)      .on('load', function () {           var w = 0;           var h = 0;           if (!this.complete || typeof this.naturalwidth === "undefined" || this.naturalwidth === 0) {               alert("could not load image");           }           else {               alert('image loaded');               w = $(this).width();               h = $(this).height();               alert("width=" + w + " height=" + h);//prints 0, 0, why???           }    }); 

jqueryobject.width() return computedstyle of targeted element.
if in css force width , height values of element, return forced values.

what need, if want size of loaded image, check naturalwidth , naturalheight properties of <img> element :

w = this.naturalwidth; h = this.naturalheight;