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

我有一个网络套接字应用程序有同样的问题所以我做了一个整洁的加载栏...

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

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

3 个答案: