ajax loader

[caladj]

hola gente de fdw tengo un problemita... yo uso un paginador que es este: http://www.ribosomatic.com/articulos/paginar-consultas-con-mysql-php-y-ajax/


y lo que queria es que cuando esta cambiando la pagina en el medio de la pantalla halla una imagen de loading.. como puedo hacer?

[caricatos]

Hola:

Otro paginador "ineficiente" con ajax... son casos absurdos, ya que plantean eficiencia al no recargar toda la página al requerir casos puntuales solamente, pero se vuelven a cargar esos datos una y otra vez cuando simplemente tan solo deberían ocultarse.

Un ejemplo mejor puedes verlo aquí: Ajax: Galería de imágenes paginada...

Sobre la pregunta concreta, pues no creo que sea problema ajax, sino javascript, deberías crear una capa oculta con una imagen que te guste para centrar y que represente esa espera (por ejemplo un reloj... tal vez de arena...) que rellene la pantalla, y tenerla oculta hasta que se haga la petición Ajax. Luego, al momento de recoger los resultados volverla a ocultar.

Saludos

[caladj]

Iniciado por caricatos

Hola:

Otro paginador "ineficiente" con ajax... son casos absurdos, ya que plantean eficiencia al no recargar toda la página al requerir casos puntuales solamente, pero se vuelven a cargar esos datos una y otra vez cuando simplemente tan solo deberían ocultarse.

Sobre la pregunta concreta, pues no creo que sea problema ajax, sino javascript, deberías crear una capa oculta con una imagen que te guste para centrar y que represente esa espera (por ejemplo un reloj... tal vez de arena...) que rellene la pantalla, y tenerla oculta hasta que se haga la petición Ajax. Luego, al momento de recoger los resultados volverla a ocultar.

Saludos

claro pero como escribo eso osea yo logre hacer esto:

Código:

divContenido = document.getElementById('contenido');
cargando = document.getElementById('cargando');

 ajax=objetoAjax();
 ajax.open("GET", "link.php?id="+nropagina);
 cargando.innerHTML= '<img src="images/cargando-ajax.gif">';
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   divContenido.innerHTML = ajax.responseText
  }
 }
ajax.send(null)

con eso me anda pero el problema es que capas el contenido cargo pero la imagen no se va queda de por vida hasta que actualize la web


no se que estoy haciendo mal

[caricatos]

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