Hola.
Estoy un poco de acuerdo con "Hats" cuando dice.
Cita: mmm esto puede tener una solucion mas simple, mira, buscate un gif animado o has tu propia animacion q diga "Cargando..."
Hace una semanas yo estuve trabajando algo similar. Para el preload es mejor que uses un gif. Puedes escoger el mejor que te parezca. Echale un vistazo a ésta página "http://www.ajaxload.info/".
En mi caso, la galería de fotos esta hecha en javascript en donde utilicé el siguiente Carrusel de fotos ["http://billwscott.com/carousel/"
En la página que estoy desarrollando debo mostrar la opción que escogió el usuario. Puede mostarse un slideshow (hecho en flash) ó puede mostrarse las fotos. MIentras se carga, la foto ó el slideshow () yo muestro un gif que le indica al usuario que se esta cargando, Cuando la carga terminó, oculto el gif.
Si te sirve, puedes utilizar DIV's. Yo utilizo 3 Div, cada uno con su respectivo ID. Uno de ellos contiene una imagen de la galeria, otro Div contiene el slideshow (flash) y el tercero tiene un gift preloadingEn cada DIV . Y lo que hago es ocultar los DIV y hacerlos visible.
Es como decir que mientras el flash/imagen no se ha cargado completamente, muestre el gift con el Preload.
Código:
//-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
function NuevoAjax(){
var xmlhttp=false;
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xmlhttp = false;
}
}
if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
//-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
function Cargar(url)
{
var contenido, preloader;
//contenido = document.getElementById('flash_content');
//preloader = document.getElementById('preloading_img');
ajax=NuevoAjax();
ajax.open("GET", url,true);
ajax.onreadystatechange=function()
{
document.getElementById("flash_content").style.display="none";
document.getElementById("preloading_img").style.display="none";
if(ajax.readyState==1)
{
document.getElementById('preloading_img').style.display="block";
}
else
if(ajax.readyState==4)
{
document.getElementById('preloading_img').style.display="none";
document.getElementById("flash_content").style.display="block";
}
}//function()
ajax.send(null);
}
Quizá este código te pueda ayudar. Espero que te funcione.
Saludos