Con gusto amigo.
Eso me tocó hacerlo para uno de mis proyectos en mi trabajo
Como dice nuestro amigo anterior, pones dos DIVS (Uno para la imagen que deseas mostrar y el otro para la imagen LOADING)
Código:
<div id="preloading_img" style="display:none" align="center">
<img name="img_preload_circle" id="img_preload_circle" src="preload.gif" /></div>
<div id="img_parts_house" align="center" style="display:block">
<img src="imagen_a_mostrar.jpg" id="img_parts_house" name="img_parts_house" />
</div>
Quiero aclararte que en el caso mío, yo utilicé un List Box y cada ves que se cambia una opción, el evento onChange="" llama a la función
change_photo_flash(1)
Todo es un javascript con algunas partes que utilice con PHP.
La función
change_photo_flash(1) debe estar ubicada entre el <HEAD></HEAD>
Este es el código:
Código PHP:
function change_photo_flash(option_foto, preload)
{
//+-IMAGE+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
imagen2=new Image;
img_pre=new Image;
//CHANGE PHOTO.
ruta = "foto_"+option_foto+".jpg";
imagen2.src=ruta;
verify_preload();
}
}//change_photo_flash()
//+-+-+-+-+-+-+-+-+-+-+-+-+-+-++-+-+-
function verify_preload()
{
if(imagen2.complete)//Imagen cargada
{
document.getElementById('preloading_img').style.display="none";
document.forms['frm_info'].img_parts_house.src=imagen2.src;//change photo.
document.forms['frm_info'].img_parts_house.style.display="block";
}
else
if(!imagen2.complete)//Imagen cargándose.
{
document.forms['frm_info'].img_parts_house.style.display="none";
document.getElementById('preloading_img').style.display="block";
setTimeout('verify_preload()', 100); // Si la imagen no ha sido cargada,... se vuelve a llamar a la misma función.
}
}//End verify_preload()
Espero que te funcione.
Nota: Para la el GIF Preload puedes crear tu favorito en
http://www.ajaxload.info/
Es bastante sencillo
Saludos
