Como mostra un preloader mientras carga una pagina.

[ljbautista]

Hola amigos, pues tengo una pagina que realiza varias consultas a mi bd, y después los va mostrando en un tabla, el asunto es que por razonas ajenas mientras carga toda la info en un tabla html tarda unos segundos este proceso.

Quisiera poder mostrar un preloader (que no se si así se le llame en realidad) o bloquear la interfaz mientras termina de cargar los datos a mi tabla pero npo he podido conseguirlo.

1o Lo intente tratando de mostrar un gif pero al entrar a la pagina primero carga la tabla y despues muestra el gif:

Código Javascript:

<style type="text/css">
 
  #pre-load-web {width:100%;position:absolute;background:#92def8;left:0px;top:0px;z-index:100000}
  #pre-load-web #imagen-load{left:50%;margin-left:-30px;position:absolute}
</style>
 
<script>
        $(document).ready(function(){
 
        $("body").css({"overflow-y":"hidden"});
        var alto=$(window).height();
        $("body").append("<div id='pre-load-web'><div id='imagen-load'><img src='http://preloaders.net/preloaders/359/Filling%20circles.gif'  /><br />Cargando...</div>");
        $("#pre-load-web").css({height:alto+"px"});
        $("#imagen-load").css({"margin-top":(alto/2)-30+"px"});
        }) 
 
        $(window).load(function(){
           $("#pre-load-web").fadeOut(1000,function()
           { 
               //eliminamos la capa de precarga
               $(this).remove();
               //permitimos scroll
               $("body").css({"overflow-y":"auto"}); 
 
           });        
        }) 
</script>
 

2o con un plugin jQuery BlockUI:

Código Javascript:

$(document).ready(function() { 
    
        $.blockUI(); 
        $('.blockOverlay').attr('title','Click to unblock').click($.unblockUI); 
}
 

Pero lo mismo primero se ve como se ve cargando el contenido de la tabla.

No se si haya algo que no este entendiendo bien o como hago para que al cargar la pagina lo primero que haga es mostrar un preloader?

De antemano gracias!

[superweb360]

¿Y por qué no pruebas de mostrar el gif animado cuando se haga click en el enlace que lleva a la página que hace consultas en la bd?

Código HTML:

<a href="pagina_pesada.php">Mi enlace</a>
<div id="wait" style="top:25%;left:0%;width:100%;text-align:center;display:none;position:fixed">
      <img style="background:white;border:1px solid black;" src="/images/loading.gif" alt="loading" />
</div>
<script>
    $("a").click(function(){
        $("#wait").css("display", "block");
    });
</script>
 

[Drako_18]

Buenas compañero,

Has probado a mostrar ese loading... Justo cuando le haces click al botón/enlace?

Por la aplicación, tenemos un iframe (que en teoría, están "prohibidos") y en la página principal, tenemos el jQuery, que mira en todos los elementos con atributo href o evento OnClick y si tienen una url, a lo que ya tiene, le añadimos la funcionalidad de mostrar el "Loading"...
Y siempre, lo tenemos que hacer al hacer click, si lo haces en el load del destino, se ejecutará cuando termine de cargar la página de destino..

Resumiendo, prueba a hacer lo que te dijo #superweb360, es lo que debería funcionar...

Otra cosa, he visto que tienes todo el JS y las <meta> en el body, deberían estar en el la cabecera (no es obligatorio, porque como ves, funcionan).


Un saludo compañero!!