jQuery: new image added to DOM always has width 0 after loaded

I need to obtain the dimensions of an image, using a dynamically created image tag. It works. But ONLY using attr('width') and ONLY if I do NOT add the image to the DOM. Otherwise, dimensions returned are zero. Why? :)

this.img = $('<img/>', {'src': e.url} );           // ge开发者_StackOverflownerate image
this.img.appendTo('body');                         // add to DOM
this.img.load(function(self){return function(){    // when loaded call function
    console.log(self.img.attr('src'));
    console.log(self.img.attr('width'));
    console.log(self.img.width());
    console.log(self.img.css('width'));
}; }(this) );                                      // pass object via closure

So I generate the image, add it to the DOM and define a handler function to be called when the image is loaded. I'm using a closure to pass it a reference to the original object, called "self" within the closure. I'm dumping the image's URL to make sure the reference is alright. Output is:

pic.jpg
0
0
0px

Now here is the strange thing: if I remove the second line above (the appendTo), then it suddenly works, but only for attr('width'):

pic.jpg
1024
0
0px

This behavior doesn't make any sense to me. I would expect to get the actual image size in all six above cases. I know now how to work-around the problem, but I'd like to understand why it happens. Is it a bug? Or is there some logical reason for it?

The above results are for Safari. I just tested with Chrome and I got all correct values in the first example, but still two zeros in the second example. Very weird.

I found a reliable solution for Safari:

• Create the image
• Attach the load() handler
• Only AFTER that, set the src attribute!!

I still don't understand why width should ever return zero, but it seems that unexpected things happen if you attach the load handler only after setting the src. I got that idea only because I encountered yet another problem with IE (which didn't even call the load handler since it considered the image loaded before the handler was attached), so the lesson I've learnt is to always do things in the order described above.

tried Your code in firebug and chrome and it behaves as expected :

var src = 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif';

this.img = $('<img/>', { 'src': src } );
this.img.appendTo('body');                         // add to DOM
this.img.load(function(self){return function(){    // when loaded call function
    console.log(self.img.attr('src'));
    console.log(self.img.attr('width'));
    console.log(self.img.width());
    console.log(self.img.css('width'));
 }; }(this) ); 

got the following :

http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif
215
215
215px

after removing the appendTo() line I'm abble to reproduce the behaviour in Chrome, but I do not find it weird. width() is calculating the actual width for the "displayed" element - e.g. everytime You put the image in a hidden div it will be == 0 !

try replacing the appendTo line with the following and You'll get the same :

this.img.appendTo( $('<div/>').css('display', 'none') );

UPDATE:

Results from Safari 3.1.2 are acting exactly the same for me as Chrome when appended to DOM.

When img is not inserted into the DOM I'm also getting acceptable (no weirdness) results :

http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif
215
0
0px

I'm convinced there must be something unique to Your setup ... or it is a Safari @ Mac OSX bug (tried Safari on Windows env).

It seems to me that the way you are assigning the jQuery object and then calling the load function on the image is a bit of an over kill, which makes it hard to see why jQuery might behave thus.

Try this:

this.img = $('<img />').attr('src', e.url).appendTo('body');
console.log('width: ' + this.img.width());

Works perfectly for me to just get it after the image is injected into the DOM.

You could also try this:

this.img = $('<img />').attr('src', e.url).css({
   'width': 'auto',
   'height': 'auto'
}).appendTo('body');
console.log('width: ' + this.img.width());
console.log('height: ' + this.img.height());

I don't think your closure is working the way you want. Have you tried something like:

this.img.load(function(){                          // when loaded call function
    console.log(this.attr('src'));
    console.log(this.attr('width'));
    console.log(this.width());
    console.log(this.css('width'));
});