Fade + Animacion de precarga de varias imagenes a la vez

Hola a todos,
estoy intentando hacer que al cargar una pagina que contiene una tabla con imagenes, estas muestren una animacion de precarga (gif animado) hasta que se hayan cargado completamente, y entonces se muestran con un efecto Fade.

He encontrado una pagina donde explica este tema muy bien, y lo he conseguido. El problema con el que me encuentro es que he dado un mismo nombre de id tanto a las celdas contenedoras como a las imagenes y solo funciona con la 1 imagen, las demás se quedan contando indefinidamente.

Este es el codigo que tengo:

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

function initImage() {

imageId = 'thephoto1';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}

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

function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 20;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}

¿Alguien se ve capaz de hecharme una mano?
muchas gracias!!!

Los ID, son identificadores únicos (uno por cada elemento), así que no se deben repetir.
Debes usar un bucle, que pase por cada uno, del tipo:
for(i=0;i<n;i++){document.getElementById("ID"+i);}

De todas formas, no se si me convence mucho ese sistema que usas... esta tarde, si nadie te ha dicho algo, y encuentro otro, te digo.

Gracias Rizome!!
sabia que era cosa de añadir un bucle pero es que no se donde lo tengo que colocar. He provado ponerlo asi, pero no me funciona..

function initImage() {
imageId = "thephoto"+i;
image = for(i=0;i<n;i++){document.getElementById("thephoto"+i);}
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}

designerFreak escribió:

Jejeje...
Te veo verdecillo en Javascript...
A ver si entre todos te echamos una mano.

Sería así: y Siendo en este caso "n" = 3

Como no me convencía esa manera de hacer lo que buscas, he intentado otra más compatible y "menos pesada".
Utilizando jQuery, intento otro procedimiento.

Lo comento en un hilo nuevo.