*nota: esta es una traduccion del tip original en ingles
Ahora vamos con la explicacion:
en primer lugar tendremos la imagen en un div como lo hariamos normalmente...
Código :
<div id='picholder'> <img src='oranged.jpg' alt='pic' id='thepic' /> </div>
...y en un archivo .css añadimos la imagen de cargando al div para q la muestre mientras se carga <--redundante no?
Código :
#picholder {
width:450px;
height:338px;
background:#fff url('loader.gif') 50% 50% no-repeat;
}
#thepic {
width:450px;
height:338px;
}Bien, ahora vamos con lo divertido.
Mediante el método write del objeto document añadimos un estilo CSS a nuestro código con el que ocultaremos la imagen.
Código :
document.write("<style type='text/css'>#thepic {visibility:hidden;}</style>");
Tenemos que tener en cuenta que document.write no funciona cuando el xHTML es enviado como una aplication/xhtml+xml.
Crearemos la función nitImagen() q hara la imagen visible haciendola pasar por un filtro de opacidad (alpha) hasta llegar a mostrarla completamente.
Código :
function initImage() {
//
imageId = 'thepic';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId, 0);
};
Anteriormente llamamos a una función setOpacity(), la q hemos de crear a parte para poder especificar cada navegador, y asi tener mayor reusabilidad de código.
Código :
function setOpacity(obj, opacity) {
opacity = (opacity == 100) ? 99.999 : opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari anterior a 1.2, Konqueror
obj.style.KHTMLOpacity = opacity /100;
// anteriores Mozilla y Firefox
obj.style.MozOpacity = opacity /100;
// Safari 1.2, posterior Firefox y Mozilla, CSS3
obj.style.opacity = opacity /100;
}
Ahora la función antes mencionada fadeIn() q se encargará de realizar un bucle que irá incrementando de 10 en 10 la opacidad de la imagen hasta llegar al 100%
Código :
function fadeIn(objId,opacity) {
//
if (document.getElementById) {
//
obj = document.getElementById(objId);
if (opacity <= 100) {
//
setOpacity(obj, opacity);
opacity += 10;
//
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
finalmente llamamos a la primera funcion en el evento onLoad
Código :
window.onload = function() {
//
initImage()
};
Ejemplo funcionando
descargar archivos
que buen tip! 
