Get image size when it loads from an extern URL in Javascript

Question

I need to know the image size when it loads from an extern URL because the project needs to resize the image div.

I need to do something like this:

<img id="imglegend'+layername+'" src="url_to_an_extern_host" />

And, using Javascript and JQuery:

$('#imglegend'+layername).ready(function(){
   var h = $('#imglegend'+layername);
   // Resize image div container
});

But this didn't work. Is it possible to do?

Thanks in advance!

Answer 1

$('#imglegend').load(function(){
   var w =    $(this).width();
   var h =    $(this).height();
   alert(w); alert(h);
}).error(function (){
   $(this).remove();//remove image if it fails to load// or what ever u want
})

Answer 2

Images don't have a ready event. They do however have a load event:

$('#imglegend'+layername).load(function(){
   alert(this.width);
});

EDIT: BTW, you need to make sure that the image isn't loaded before you attach the event handler. You'll wither need to assign the src in your script after assigning the handler instead of in your HTML, or assign the handler in the onload HTML instead.