[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