Obtener alto y ancho de una imagen

[quebien]

Hola! Estoy queriendo obtener el ancho y alto de una imagen con JS de esta manera:

var imagen = new Image();
imagen.src = "img/foto.jpg";
var ancho = imagen.width;
var alto = imagen.height;

Anda bien en IE pero no en Firefox, porque aparentemente no espera a que cargue la imagen y salta a las lineas de ancho y alto y las setea en 0.
Si actualizo la pagina setea bien el ancho y el alto (porque ya esta cacheada la imagen).

¿Hay alguna solucion para este problema?

Gracias!!

[Vhan]

De hecho acabo de probarlo con IE y me sale el mismo resultado (0,0 al abrirlo por primera ves), creo que el error es porque el script hace primero la declaracion del ancho y alto, antes de que termine de cargar por completo la imagen;
para eso usa el atributo "complete", el cual te dice si una imagen ha terminado de cargar o no...

ayudo un poco... ahunque no esta del todo solucionado:

Código:

<script type="text/javascript" language="javascript">



var imagen = new Image();
imagen.src = "upload02.JPG";
var ancho = imagen.width;
var alto = imagen.height;

if (imagen.complete==true){
alert(alto);
alert(ancho);
}


</script>

con esto solo verifico si la imagen ha terminado de cargar para imprimir los atributos... si no ha cargado simplemente no imprime nada...
ya se puede arreglar con un while o un wait supongo...

espero ayude.

[zerokilled]

Iniciado por quebien

...porque aparentemente no espera a que cargue la imagen y salta a las lineas de ancho y alto...

precisamente eso es lo que sucede. sin embargo, la alternativa del complete no la considero fiable. primero, no es una propiedad estandarizada por W3C, de modo que probablemente no todos los navegadores admiten dicha propiedad. aunque con algo de suerte los navegadores mas populares lo admiten, desconozco de Chrome y Safari. por otro lado, con la propiedad complete habria que verificar constantemente para determinar si se cargo la imagen o no.

la otra alternativa es utilizar el evento onload en la imagen:

Código:

var img = new Image();
img.src = "ruta/filename.ext";
img.onload = function(){
ancho = this.width;
alto = this.height;
// de ser necesario, otras sentencias...;
}