He estado siguiendo el tutorial que aparece en esta página de ajax preloader y lo he adpatado para que muestre un gif que tapa toda la pagina hasta que ésta se termina de cargar y entonces cambio la visibilidad de la capa de ese gif a nula para que se muestre la página.
Éste es el codigo:
Código :
function loadPreloader(url) {
var preloader;
preloader = document.getElementById('preloader');
//creamos el objeto XMLHttpRequest
ajax=NuevoAjax();
//peticionamos los datos, le damos la url enviada desde el link
ajax.open("GET", url,true);
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
if(ajax.status==200){
//ocultamos la capa preloader
preloader.style.visibility = 'hidden';
}else if(ajax.status==404){
preloader.innerHTML = "La página no existe";
}else{
//mostramos el posible error
preloader.innerHTML = "Error:".ajax.status;
}
}
}
ajax.send(null);
}
A esta funcion la llamo desde body onload, con lo cual estoy mostrando una imagen de cargando que tapa toda mi página hasta que esta se carga. Desapareciendo el cargando y quedando a la vista toda la página perfectamente cargada.
Pues bien resulta que esto funciona genial para todos los casos en IE, pero hay un problema en firefox:
En mi página hay una capa que se carga desde css y que contiene una imagen pesada que se carga como fondo (background), que es realmente por la cual he colocado el preloader.
Pues bien, si esa imagen estuviera colocada en la página mediante un img src, firefox no le daría al ajax.status el valor 200 hasta que no se hubiera cargado, pero al ser un fondo que se pasa mediante una capa css, ajax.status toma el valor 200 sin que este se haya cargado...
Estoy desesperado porque ya he probado de todo y como ya os he dicho, en IE funciona perfectamente, hasta que no se ha cargado el fondo no se retira el preloader, pero en firefox no...
¿Alguien puede ayudarme?
Muchas gracias a todos y perdón por el ladrillo...
