cambiar atributo css progresibo

[mikelatx]

Hola, haber si alguien se anima aecharme una mano , que tengo la cabeza perdia.
al tajo.
teng oun div donde le voy a cargar una foto

Código:

#argazkia {
background-image : url('images/loading.gif');
background-position : center center;
background-repeat : no-repeat;
border: 1px solid #FFF;
margin:auto;
width:400px;
height:400px;}

tengo el div con la foto insertado dentro pero escondido.

Código:

#img { 
visibility:hidden;

  }

Lo que me gustaria seria una ver cargada la foto acerla aparecer, pero primero agrandar el div argazkiak al tamaño de lafo

Código:

function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
var inicio=400;
var heightpx = height+10+'px';
var widthpx = width+10+'px';
var widthtop = width+10;
var heighttop = height+10;
do { 
inicio=inicio+10;
document.getElementById('argazkia').style.width = inicio;

}while ( inicio < widthtop);

do { 
inicio=inicio+10;
document.getElementById('argazkia').style.height = inicio;

}while ( inicio < heighttop);
 };

con esta funcion consig oque el div coja la anchura y altura necesaria pero lo hace de golpe, me gustaria poder hacerlo progresibo, no se ne 1500 milisegundos o hasi....
he probado con settimeout pero no lo consigo.......alguien puede echarme una mano?,

[caricatos]

Hola.

Los temporizadores en javascript son setInterval y setTimeout... el primero se repite indefinidamente y el segundo solo una vez... aunque ambos pueden cancelarse... lo que me extraña es que puedas usar el tamaño de la imagen inmediatamente después de asignarles el src... supongo que habrás hecho tus pruebas sin subir la página...

En principio, es mejor usar el evento load de las imágenes para obtener los atributos de las dimensiones de forma fiable...

Cuéntanos tus progresos...

Saludos

[mikelatx]

ok ,lo estoi intentando, pero me pasa lo siguiente
tras obtener los datos de la foto, ejecuto lo siguiente

Código:

function subir(widthfoto, inicio){
document.getElementById('argazkia').style.width = inicio;
inicio=inicio+10;
if ( inicio < widthfoto ){
setTimeout ( "subir(widthfoto,inicio)",1000);
};
}

al ejecutar la funcio mo funciona porque no se como reenbiarle a la funcion las variables widthfoto y inicio . y parece que si uso setTimeout no le puedo enviar las variables como esta en el ejemplo...se puede hacer de otra manera?