Jquery.width return 0 on photo

Question

I am using code that looks like this:

img.load(function(){ // do some stuff $(this).width(); }); 

In my callback, the image size is always 0. It may have something to do with it, but my images are uploaded locally.

But in truth, if I do this.width, I will get the expected width, and then I can do some kind of calculation here to change the extjs window.

After some attempts, I realize that if I do $ (this), all the attributes that I change have no effect whatsoever.

Doing $(this).width(40); will not change the width of my image, but this.width = 40 will change the width of my image. As if $(this) copying my HTMLImageElement in a new element, and these changes will only apply if I add it to dom again to replace the old one.

I'm not sure I understand what is happening there.

Edit

This is my img variable.

 img = $('<img>'); img.attr('src', '....image'); 

Edit 2

This does not change the fact that jQuery does not handle image size in memory images, but I felt that it would be nice if someone used Extjs so as not to repeat my mistake. One of the serious problems in my case is that the img object that I used was a valid object, but since I use ExtJs, I inadvertently made a stupid mistake. I created my window this way ...

 Ext.create('Ext.Window', // some settings items: [{ html: img.wrap('<div>').parent().html(), // etc 

In other words, the event I created was on img, but I never added img to the DOM. ExtJs added html text to the DOM, which created a new object that cannot be changed using an event, etc.

Therefore, I need to create an identifier to find a new element, and all this needs to be done after the modalWindow.show() call completes. After that, everything works fine.

To resize the window, if the dimensions are set, you can set them back to null and make a doLayout call in the window, and it will recalculate windowsize.

Answer 1

You have found that jQuery(this).width() does not work for images in memory. You can use this.width / height or add it to the page and read it.

Answer 2

I think you should try this ...

  $("img").load(function(){ // do some stuff $(this).width(); }); 

if you only use img tag. in case you have the identifier of the img tag, then you should use, for example, $ ("# idimg) .load (fun ...... contd.)