Javascript 在加载页面之前加载进度条

我有一个基本的登录页面，将用户名和密码发送到数据库，如果验证成功，将显示主页。我面临的问题是，在显示主页的过程中，从数据库中提取了大量数据。 因此，页面加载大约需要10秒。有没有办法在页面加载时显示加载进度条或其他内容？ 目前我正在使用

<script>
    $(window).load(function(){
        $('#dvLoading').fadeOut(4000);
    }); 
</script>

$（窗口）。加载（函数（）{
$（'dvLoading'）。淡出（4000）；
}); 

其中dvLoading是一个简单的进度条gif。这很有效。但是，问题是加载页面后会显示此进度条。所以，这并不能完全解决我的目的。如何在将用户名和密码发送到数据库时立即显示它？任何关于这方面的帮助都会非常有帮助。谢谢您的时间。

试试这个：

// jQuery Plugin and calling function in page load
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#pageloaddiv").fadeOut(2000);
});

$('submitbuttonselector').bind('click',function(){
 $("#pageloaddiv").fadeIn(500);//show loading div on submit of username and password
})
</script>

// CSS Class
<style type="text/css">
#pageloaddiv {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url('http://4.bp.blogspot.com/-hO_3iF0kUXc/Ui_Qa3obNpI/AAAAAAAAFNs/ZP-S8qyUTiY/s1600/pageloader.gif') no-repeat center center;
}
</style>

// loading div to show loading image
<div id="pageloaddiv"></div>

//页面加载中的jQuery插件和调用函数
$（窗口）。加载（函数（）{
$（“#pageloaddiv”）。淡出（2000年）；
});
$（'submitbuttonselector'）.bind（'click'，function（）{
$（“#pageloaddiv”）.fadeIn（500）；//提交用户名和密码时显示加载div
})
//CSS类
#pageloaddiv{
位置：固定；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
z指数：1000；
背景：url（'http://4.bp.blogspot.com/-hO_3iF0kUXc/Ui_Qa3obNpI/AAAAAAAAFNs/ZP-S8qyUTiY/s1600/pageloader.gif“）无重复中心；
}
//加载div以显示加载图像

你能试试这个吗

<script>
  $(document).ready(function(){
     $('#dvLoading').show();
  });

  $(window).load(function(){
     $('#dvLoading').fadeOut(4000);
  }); 
</script>

$（文档）.ready（函数（）{
$（'#dvLoading'）.show（）；
});
$（窗口）。加载（函数（）{
$（'dvLoading'）。淡出（4000）；
}); 

我有一个web sockets应用程序也有同样的问题，所以我制作了一个整洁的加载条

HTML

<div id="loaderbar"style="position:absolute;top:56px;width:930px;margin-left:auto;margin-right:auto;height:10px;">
    <div id="LOADER"style="background:#E55757;height:10px;width:0px;position:relative;top:0px;left:0px;"max="930"></div>
</div>

var MAXL=0; //MAXL is how many times do you want to see the load bar move to show progress

var LEVENTS=9;

MAXL=parseInt($('#LOADER').attr('max'))/(LEVENTS);

$('#LOADER').animate({width:$('#LOADER').width()+MAXL+'px'}); // drop this line in when ever a stage of progress happens... Should be the same amount of times as LEVENTS