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
:
Ver original<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
:
Ver original$(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!