find the dimensions of a dynamically loaded but DOM-appended image using jquery?

Question

I'm loading the source of an image dynamically using ajax, where s is this source. I create an image element in the DOM, assign it this source once it's loaded, and then append it to a div called imgwrapper. Then I try to get the image's dimensions, but it doesn't work. I'm aware you can't get the dimensions of an image that's dynamically loaded, but not even after being appended to the DOM?

My code is as below:

//use ajax to get value of s (the image source)
img = document.createElement("img"); 
img.src = s; 
$('#imgwrapper').appendChild(img); 
console.log($('#imgwrapper').find('img').width());

this returns 0, instead of giving me the image's width.

Are you sure it's in the DOM? There's no $.appendChild(), that should be $.append(). On another note, you don't need to reselect the element after it's appended, you can just wrap img in a jQuery object: $(img).width(). — Mattias Buelens
– Mattias Buelens, Commented Jan 15, 2013 at 10:22

Andreas · Accepted Answer · 2013-01-15 10:21:31Z

4

Wait till the image has finished loading

//use ajax to get value of s (the image source)
img = document.createElement("img"); 
img.onload = function() {
    console.log($('#imgwrapper').find('img').width());
};
img.src = s; 

$('#imgwrapper').append(img);

Edit
As @MattiasBuelens mentioned. There is no .appendChild() for a jQuery object. That should be .append() instead

answered Jan 15, 2013 at 10:21

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

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

2 Comments

Mattias Buelens Over a year ago

Another optimization: use $(img) in the handler instead of reselecting.

Mattias Buelens Over a year ago

If you really want to, you could go completely jQuery on this and use $(img).on('load', function() { ... }); to bind the load handler.

Razmig · Accepted Answer · 2013-01-15 10:23:54Z

0

You can try this:

img = document.createElement("img"); 
img.src = "http://placehold.it/350x150"; 
$('#imgwrapper').append(img); 
console.log($('#imgwrapper').find('img').width());

Working example: http://jsbin.com/adajuh/1/

answered Jan 15, 2013 at 10:23

Razmig

6491 gold badge5 silver badges10 bronze badges

3 Comments

Razmig Over a year ago

you need to use append instate of appendChild

Razmig Over a year ago

anyway it is answered above from @Andreas

Mattias Buelens Over a year ago

This doesn't work, it still gives 0 on the first load. When you load it the second time, it works since the image is already in the cache - but that's cheating. Try it yourself: press Ctrl+F5 and check the console.

Collectives™ on Stack Overflow

find the dimensions of a dynamically loaded but DOM-appended image using jquery?

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related