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

Question

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

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

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

Answer 1

你能试试这个吗？

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

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

Answer 2

试试这个：

// 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>

Answer 3

我有一个web socket应用程序也有同样的问题，所以我做了一个整洁的加载栏……

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>

Javascript

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