Cargar imágenes sin flash

Ycon efecto "fade" (carga lenta, de manera que la imagen va apareciendo como si se levantara desde ella una cortina de niebla).

El Ejemplo en
Test
y se hace así:

1. CSS: a colocar antes del cierre /skin (o /style, si es una plantilla clásica)




#photoholder {

width:470px;

height:380px;

border:1px solid #666;

background:#fff url('/images/loading.gif') 50% 50% no-repeat;

}

#thephoto {

width:450px;

height:338px;

}

TABLE {

margin-bottom:1em;

border-collapse:collapse;



}

TH {

font-weight:normal;

font-style:italic;

white-space:nowrap;

text-align:left;

}

TD, TH {

vertical-align:top;

padding:0.25em 0.5em;

border:1px solid #ddd;

}





2. Script, a colocar justo antes del cierre /head:




<script type='text/javascript'>

<!--

document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");



function initImage() {

imageId = 'thephoto';

image = document.getElementById(imageId);

setOpacity(image, 0);

image.style.visibility = "visible";

fadeIn(imageId,0);

}

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);

}

}

}

function setOpacity(obj, opacity) {

opacity = (opacity == 100)?99.999:opacity;

// IE/Win

obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror

obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox

obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3

obj.style.opacity = opacity/100;

}

window.onload = function() {initImage()}

// -->

</script>





3. última pieza de código, a colocar en el sitio donde querías ver la imagen, por ejemplo, en una entrada del blog:

<p id="photoholder">

<img src="URL IMAGEN.jpg" alt="tÍTULO DE LA IMAGEN." id="thephoto" />

En el ejemplo que tengo en mi plantilla de pruebas, he encerrado en una tabla la imagen, a fín de que se vea mejor cómo se descarga. Pero la tabla se puede quitar sin problemas, con sólo eliminar del CSS las definiciones de la misma (TABLE {

margin-bottom:1em;

border-collapse:collapse;



}

TH {

font-weight:normal;

font-style:italic;

white-space:nowrap;

text-align:left;

}

TD, TH {

vertical-align:top;

padding:0.25em 0.5em;

border:1px solid #ddd;

}
)

Y la idea la encontré en
Clagnut

¡Ah!: Quien quiera puede añadir una imagen de carga ("loading")en el CSS.