在頁面加載之前加載進度條

我有一個基本的登錄頁面，用於向數據庫發送用戶名和密碼，如果驗證成功，則會顯示主頁。我面臨的麻煩是，在此過程中顯示主頁時會從數據庫中提取大量數據。因此，頁面加載大約需要10秒。有沒有辦法顯示加載進度欄或頁面加載時間？目前我使用在頁面加載之前加載進度條

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

其中dvLoading是一個簡單的進度條GIF。這工作。但是，問題在於此頁面加載後此進度欄顯示。所以，這並不能完全解決我的目的。如何在我將用戶名和密碼發送到數據庫後立即顯示它？任何有關這方面的幫助都會非常有幫助。謝謝你的時間。

來源

2014-01-23 Ankur Chachra

試試這個：

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

來源

2014-01-23 07:19:32

你可以試試這個？

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

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

來源

2014-01-23 07:20:41

我有一個Web應用程序的插座是有同樣的問題，所以我做了一個整潔的負載棒...

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

來源

2014-01-23 08:32:13

在頁面加載之前加載進度條

回答

相關問題