Hola:
Bueno, la cosa es que ese código por lo que veo tan solo deja en memoria la última imagen del array de imágenes... sí, sólo la última, ya que al usar una sola variable, el segundo elemento del array/bucle machaca al primero, y así hasta el último que es el único que perduraría...
Aún creando un array con las imágenes, y consigas cargar todas, no sólo no hace nada con el flujo normal de la carga de la página, sino duplicas el espacio en memoria que ocupan esas imágenes, con lo que llego a la conclusión que sólo vale para ralentizar la carga de la página...
Otra cosa es que crear una variable con la imagen y tenerla en memoria no indica que se haya cargado... para eso existe el atributo complete que se pone true con el evento asociado a los medios /entre ellos las imágenes) "load", (onload, tanto de los objetos "Image()", como los tags "img")...
A qué conclusión podemos llegar... si quieres que no se muestre la página hasta que se carguen las imágenes, añádele a las imágenes un tratamiento de su evento load, y al cargarse todas mostrar esa página:
var contador = 0;
window.onload = function() {
for (i in document.images) document.images[i].omload = chequeo;
document.body.style.display = "none"
}
function checkeo() {
if (++contador == document.images.length) document.body.style.display = "block";
}
Pero ese sistema particularmente no me gusta... lo que me parece mejor es poner cada imagen con sus dimensiones, para que no se descuadre mientras la página se carga, y si lo quieres más bonito, poner una imagen del tipo "relojito" para mostrar que la imagen se está cargando... Hace poco puse algo de ese estilo en esta página:
Caricaturas "San Jorge"
Saludos
