Hola:
Pues verás, un poco más eficiente podría ser por ejemplo guardando en una variable la página actual, y crear una nueva capa por cada nueva petición... luego simplemente si existe la página mostrarla en cada petición, y si no existe crear esa capa... más o menos... suponiendo que la petición la hagas con una función "pedir_pagina(n)"...
<script>
actual = 1;
function pedir_pagina(n) {
document.getElementById("pagina_" + actual).style.display = "none";
if (document.getElementById("pagina_" + n))
document.getElementById("pagina_" + n).style.display = "block";
else {
divContenido = document.createElement("div");
divContenido.id = "pagina_" + n;
document.body.appendChild(divContenido);
// aquí el resto que del código que tienes...
}
actual = n;
}
Se supone que la primera página será "pagina_1"...
Saludos
... por cierto, ¿te ha servido lo de la página cargando... ? parece que no...
La idea sería que tu capa "cargando" esté oculta y sea la última (antes del </body>, y con estos estilos:
#cargando {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white url(espera.gif) no-repeat center center;
}
Entonces la instrucción sería:
cargando.style.display ="block"; al hacer la petición ajax, y cambiar "block" por "none" cuando se obtiene la respuesta ajax...
Y las nuevas capas deberían estar antes de la capa "cargando"...
document.body.insertBefore(divContenido, cargando);