Hola:
Hay un problema si no se conoce las medidas de la imagen, ya que si se quieren saber esas dimensiones, debe estar cargadas (y se consultarían sus atributos width y height), pero justamente cuando se cargan es cuando se muestran... o sea que sin esos valores es imposible que funcione, pero si son imágenes fijas, esos valores se conocen (desde el sistema operativo, consultando sus propiedades).
Una variante del efecto para imagenes cambiantes es:
Código:
<html>
<head>
<script>
function tag(id) {return document.getElementById(id);}
function imagen(cual) {
tag("cargando").style.visibility = "visible";
tag("foto").src = cual;
}
</script>
</head>
<body style="backgrund-color: #eeeeee">
<div>
<button type="button" onclick="imagen('../fotos/FONDO008.gif')" >foto 1</button>
<button type="button" onclick="imagen('../fotos/CostadelSol.jpg')" >foto 2</button>
<button type="button" onclick="imagen('../fotos/carnaval-almeria.jpg')" >foto 3</button>
<button type="button" onclick="imagen('../fotos/castillo-Almeria.jpg')" >foto 4</button>
</div>
<span style="position: relative; background-color: gray; padding: 0"
><img src="../fotos/FONDO008.gif" width="480" height="360" style="pargin: 0" id="foto" onload="this.nextSibling.style.visibility = 'hidden'"
/><span id="cargando" style="position: absolute; background: white url(../dibujos/indicator.gif) no-repeat center center; top: 0; left: 0; width: 480px; height: 360px" />
</span>
</body>
</html>
Se puede probar en el mismo probador del mensaje anterior.
Saludos
