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

Question

I have a basic login page that sends username and password to the database and if the validation is successful, home page is displayed. The trouble I am facing is that there's a lot of data that is being fetched from the database in this process for displaying the home page. Hence, the page load takes around 10 seconds. Is there a way to display a loading progress bar or something for the time that the page loads? Currently I am using

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

where dvLoading is a simple progress bar gif. This works. However, the problem is that this progress bar displays AFTER the page is loaded. So, this doesn't quite solve the purpose for me. How can I display it as soon as I send the username and password to database? Any help regarding this would be very helpful. Thanks for your time.

Answer 1

Can you try this?

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

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

Answer 2

Try this:

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

I have a web sockets app that had the same issue so i made a tidy load bar...

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