[SOLUCIONADO] Mostrar Imagen tiempo determinado ajax

[Cloudz]

Buenas tardes quiero ver si me podrian ayudar, resulta que tengocarga con ajax y funciona perfectamente

Esta es la funcion que uso para cargar los contenidos

Código PHP:

  function ajaxFunction() {
  var xmlHttp;
  
  try {
   
    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
  } catch (e) {
    
    try {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
    } catch (e) {
      
      try {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
      } catch (e) {
        alert("Tu navegador no soporta AJAX!");
        return false;
      }}}
}
 
 
 
 
function Enviar(_pagina,capa) {
    var ajax;
    ajax = ajaxFunction();
    ajax.open("POST", _pagina, true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
    ajax.onreadystatechange = function() {
        if (ajax.readyState==1){
            document.getElementById(capa).innerHTML = "<img src='img/loading.gif' align='center' /> Aguarde por favor...";
                 }
        if (ajax.readyState == 4) {
           
                document.getElementById(capa).innerHTML=ajax.responseText; 
             }}
             
    ajax.send(null);
} 
   

luego esta el menu que carga lso contenidos en el div especificado

Código PHP:

  <ul id="menu">
             <li><a href="javascript:Enviar('contenido_index.php','carga_contenido')" id="index_h">Inicio</a></li>
             <li><a href="javascript:Enviar('servicios.php','carga_contenido')" id="servicios_h">Servicios</a></li>
             <li><a href="javascript:Enviar('video.php','carga_contenido')" id="herramientas_h">Herramientas</a></li>
             <li><a href="javascript:Enviar('cobertura.php','carga_contenido')" id="cobertura_h">Cobertura</a></li>
             <li><a href="javascript:Enviar('atencion.php','carga_contenido')" id="atencion_h">Atenci&oacute;n al Cliente</a></li>
         </ul> 
   

El problema es esto

Código PHP:

  if (ajax.readyState==1){
            document.getElementById(capa).innerHTML = "<img src='img/loading.gif' align='center' /> Aguarde por favor...";
                 } 
   

quiero ver la imagen por eso me gustaria darle un tiempo predeterminado para la carga no se 2 segundos o asi para alcanzar a ver que funcione bien la imagen pero no he encontrado funcion ni delayde donde ni como ponerlo, gracias :D

[emprear]

La idea del preloader no es esa, sino mostrar la imagen el tiempo que demora de pasar del readyState 1 al 4, y a veces es tan corto que no llegás a visualizar la imagen, si lo que querés es forzar la visualización, en el readyState 4 llamá una que haga el setTimeout para mostrar la respuesta

SAludos

[Cloudz]

Me podrias dar un ejemplo? aplicado a ajax?

estoy probando con

Código PHP:

if (ajax.readyState==1){
             var sTimeOut = setTimeout(function () {
                    document.getElementById(capa).innerHTML = "<img src='img/loading.gif' align='center' /> Aguarde por favor...";
             }, 10000);
        }
 

pero la verdad no me funciona por que de seguro no lo estoy aplicando bien, gracias

[emprear]

Fijate primero este ejemplo, lo tengo hecho para otra cosa, pero quizás te pueda interesar
http://foros.emprear.com/ajax/ajax_t..._ajax_fdw.html
mirá el código fuente, y el de cargaAjax.js
Está hecho para simular una barra de progreso y mostrar el tienpo de carga. (real, entre el state 1 y el state 4)

Ahora haciendo una adaptación a lo que vos querés, hice esto
http://foros.emprear.com/ajax/ajax_t...ajax_fdw2.html y cargaAjax2.js

En la página principal creás esta función

Código:

<script type="text/javascript">
//<![CDATA[

function detener(respuesta){
document.getElementById('contenido_ajax').innerHTML = respuesta;
}
//]]>
</script>

y en cargaAjax2.js, hacemos esta modificación, cuando state == 1
ponemos el loader gif (al inicio está definido ese html)
cuanto state 4 y estatus 200, hacemos lo siguiente

Código:

				//document.getElementById(divAjax).innerHTML=contenidoAjax.responseText;
				//console.log(contenidoAjax.responseText);
				setTimeout(function() { detener(contenidoAjax.responseText) }, 4000);

esperamos 4 segundos para pasar a detener() el responseText y que esa función se encargue de hacer el innerHTML a la capa de destino

Se entiende?
Pero te insisto, le estás quitando el sentido correcto al uso de un ajaxLoader.gif


Saludos

[Cloudz]

Gracias con eso ya es mas que suficiente de echo esto era una prueba no trataba de forzar el cargado a mas tiempo sino estaba tratando de visualizar la imagen por que ya habia probado otros metodos y no se veia por eso queria darle un tiempo determinado para alcanzar a visualizar que se cargara bien o mejor dicho que estaba poniendo bien el codigo de la imagen, disculpen las molestias pero ya con esto quedo :D