[SOLUCIONADO] Imagen cargando al pasar de página

satjaen · #1 (**permalink**) 04/04/2014, 12:08

Hola tengo este código en una página y me gustaría saber como puedo hacerlo para que al llamar a la function pulsar() y mientras carga la página index.php poner una imagen de loading......

Código Javascript:

Ver originalfunction pulsar(){
                   
               
                        
        var idav = $('#demo2') .val();
                window.location ="index.php?ID=" + idav; 
                    
                }

Gracias y un saludo

satjaen · #2 (**permalink**) 05/04/2014, 04:10

Es una cosa parecida a esta la que quiero hacer:

Código Javascript:

Ver original<script>
 
function pulsar(){
               
             var idav = $('#id_aviso') .val();   
                   
                
                 $.ajax({ 
                 type:  'get', 
                 beforeSend:function(objeto){ 
                 $('#carga').css({display:'block'});
                 },
                 complete:function(){
                 $('#carga').css('display','none');
                 },
                 success: function(response) {
 
              
                      window.location ="index.php?ID=" + idav; 
                                           
                 
          }
          
    });
 
}
 
  </script>

Pero no se si se podrá mejorar ?

Alexis88 · #3 (**permalink**) 05/04/2014, 10:10

Se me ocurre una solución y sin necesidad de echar mano de los métodos de jQuery. En un contenedor, ya sea un <div> o un <section>, coloca el contenido del <body> de tu documento, además, crea un elemento <img> y colócalo fuera del contenedor. A este elemento, le asignas el gif de carga.

Luego, en JavaScript, ocultas dicho contenedor y transcurridos N segundos, muestras el contenedor y ocultas el gif.

Código Javascript:

Ver originaldocument.getElementById("contenedor").style.display = "none";
document.getElementById("gif").style.display = "block";
 
window.onload = function(){
    setTimeout(function(){
        document.getElementById("contenedor").style.display = "block";
        document.getElementById("gif").style.display = "none";      
    }, 3000);
};

El tiempo que le doy es para que se cree el efecto de espera, porque probablemente la página cargue tan rápido que ni tiempo tendrías de ver el gif.

Saludos