Centrar imagen en un DIV

[isabelramirezmontoya]

Chicos en dias anteriores me colaboraron con un problema que tenia al cargar imagenes, con su colaboracion logre solucionarlo

Ahora tengo otro problema pero no doy con la solucion, me pueden dar una mano por favor.

Con un boton activo una funcion que muestra una imagen en un DIV, eso funciona muy bien, el problema es que primero visualiza la imagen y luego la centra en el DIV, no he logrado que antes de visualizarla la centre en el DIV.

He consultado ejemplos sobre el evento IMG.ONLOAD en la red pero no veo la forma de afectar mi script para que tenga el efecto que deseo

Código HTML:

function mostrarImagen() {
 
   var nombre_imagen = "imagen.jpg";
   img = new Image();
   img.onload=function(){
   var alto = img.height; //Alto;
   var ancho = img.width; //Ancho;
 
   if (alto =< 400) {
    alto = (400 - alto)/2;
    document.getElementById('solicitud-imagen').style.marginTop = alto+'px';
   }
   
   if (ancho =< 400) {
    ancho = (400 - ancho)/2;
    document.getElementById('solicitud-imagen').style.marginLeft = ancho+'px';
   }
 
   }
 
   img.src = nombre_imagen+'?'+(+new Date);//esto lo agregamos para las versiones de explorer que ignoran el evento onload si la imagen está en caché -esto evita la carga desde la caché-
 
   document.getElementById('solicitud-imagen').src = nombre_imagen;  
}
 

Gracias

[IsaBelM]

prueba así

var nombre_imagen = "imagen.jpg?cache="+new Date();
var img = new Image();
img.src = nombre_imagen;

var img2 = new Image();
img2.src = img.src;
img2.onload=function(){
var alto = this.height; //Alto;
var ancho = this.width; //Ancho;

[isabelramirezmontoya]

IsaBelM, gracias por tu tiempo

Antes de tu codigo, la imagen aparecia en el rincon superior izquierdo del DIV y a los dos o tres segundos se centraba, con tu codigo la imagen aparece en el rincon superior izquierdo del DIV y cuando termina de cargarse se centra, no aparece centrada de entrada

[IsaBelM]

ahora creo a ver entendido. fíjate en los cambios he hecho

function mostrarImagen() {

var nombre_imagen = "imagen.jpg?cache="+ new Date();
img = new Image();
img.src = nombre_imagen;
img.onload=function(){
var alto = this.height; //Alto;
var ancho = this.width; //Ancho;

if (alto <= 400) {
alto = (400 - alto)/2;
document.getElementById('solicitud-imagen').style.marginTop = alto + 'px';
}

if (ancho <= 400) {
ancho = (400 - ancho)/2;
document.getElementById('solicitud-imagen').style.marginLeft = ancho + 'px';
}
document.getElementById('solicitud-imagen').src = this.src;
}

//img.src = nombre_imagen+'?'+(+new Date);//esto lo agregamos para las versiones de explorer que ignoran el evento onload si la imagen está en caché -esto evita la carga desde la caché-
}

la imagen no se mostrará hasta que esté cargada y una vez cargada se mostrará en el centro

[isabelramirezmontoya]

IsaBelM, con los cambios que me sugeriste quedo perfecto mil gracias