Why Am I Not Getting Image Width And Height After Loading?

I am an image element. I let user upload an image. After upload, I process the image. I want to load the processed image and show it. I am getting and show the image just fine. I a

Solution 1:

jQueryObject.width() will return the computedStyle of the targeted element. If in your CSS you force the width and height values of this element, then it will return those forced values.

What you need, if you want to get the size of the loaded image, is to check the naturalWidth and naturalHeight properties of your <img> element :

w = this.naturalWidth;h = this.naturalHeight;

Solution 2:

I tried many ways, Your way:

var img = $("#photo").attr('src', '/photo/get/' + id)
     .on('load', function () {

Output: Nothing.

using .load():

var img = $("#photo").attr('src', '/photo/get/' + id)
     .load( function () {

Output: Nothing.

using .ready():

var img = $("#photo").attr('src', '/photo/get/' + id)
     .ready( function () {

Output: "Could not load image".

So it didn't work. Maybe something buggy there.

But when I used,

var img = $("#photo").attr('src', '/photo/get/' + id)
     .on('click', function () {

Output: "Image loaded";"width=280 height=160".

It worked perfectly given the proper Height and Width. There's buggy something in on("load",) or load() not in your code.

P.S. jQuery: ver:1.11.3. Browser: IE:11.0, Firefox:40.0, Opera:32.0