Hola:
La capa antes del cierre del body deberías posicionarla como puse antes:
<body>
...
<div id="ocultador" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white url(cargando.gif) no-repeat center center"></div>
</body>
Hay cosas muy importantes... position: absolute, y los valores de top, left, width y height como están (aunque se podría obviar el width...), y darle un color de fondo porque sino por defecto suelen ser "transparent"... y el tema de la imagen, si el body tiene un scroll podría no verse (aunque creo que sí...)
De todos modos te preparé un ejemplo completo:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
http://www.caricatos.net/probador
</title>
<script type="text/javascript">
function precargar() {
imgs = document.images;
precargadas = true;
for (var i = 0, total = imgs.length; i < total; i ++)
precargadas = (precargadas && imgs[i].complete);
if (precargadas) document.getElementById("ocultador").style.visibility = "hidden";
else setTimeout("precargar()", 100);
}
window.onload = precargar;
</script>
</head>
<body>
<img src="../fotos/carnaval-almeria.jpg" />
<img src="../fotos/CostadelSol.jpg" />
<img src="../fotos/castillo-Almeria.jpg" />
<img src="../fotos/volando.jpg" />
<img src="http://www.sucaricatura.com/2002/fotos/2002V087.jpg" />
<div id="ocultador" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white url(../dibujos/reloj.gif) no-repeat center center"></div>
</body>
</html>
Lo puedes pegar directamente en este
Probador de scripts
Lo de las redimensiones deberás adaptarlo.
Saludos
