DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jQuery實現模擬頁面加載進度條代碼
基於jQuery實現模擬頁面加載進度條代碼
編輯:JQuery特效代碼     
因為我們無法通過任何方法獲取整個頁面的大小和當前加載了多少,所以想制作一個加載進度條的唯一辦法就是模擬。那要怎麼模擬呢?


我們知道,頁面是從上往下執行的,也就是說我們可以大致估算出在頁面的某個位置加載了多少,而後用jq模擬出一個進度條來顯示。

首先我們先畫一個進度條的樣子,也就是上圖圖中的樣子,這個不用過多說明,自己看代碼
CSS
. 代碼如下:
.loading{position:relative;top:0;left:0}
.tip1{float:left;background:#A70000;color:#fff;height:32px;line-height:32px;padding:0 15px;border:0;position:relative}
.jindu{float:left;margin-left:20px;color:#fff;width:150px;height:32px;line-height:32px;background:#000;position:relative}
.jindu b{color:#A70000;width:0;height:0;font-size:0px;border-width:10px;border-color:#fff #fff #fff #A70000;border-style:solid;position:absolute;left:-20px;top:5px;overflow:hidden}
.jindu .jindu2{width:0px;height:32px;line-height:32px;background:#A70000;position:absolute}
.jindu .text{width:150px;height:32px;line-height:32px;text-align:center;position:absolute}
 
HTML
. 代碼如下:
<div class="loading">
<div class="tip1">系統初始化中</div>
<div class="jindu">
<b></b>
<div class="jindu2"></div>
<div class="text">頁面總進度 <font>0</font>%</div>
</div>
</div>

這時候注意了,我們要引用jquery庫,引用的位置不是在head區域,而是緊接著html代碼下面寫。為什麼要這樣,因為樣式我們放head裡的原因是保證頁面加載第一步就把樣式加載好,這樣頁面不會亂。而JS則不需要,再加上頁面上大的文件主要也就是js,所以放在body裡加載js是為了進度條考慮。
進度條畫好了,jquery引用了,我們現在要寫個方法,也就是可以讓進度條動起來
. 代碼如下:
var loading = function(a,b){
var c = b*1.5;
if(b==100){
$('.bgloader .jindu2').animate({width:c+'px'},500,function(){
$('.bgloader .tip1').text(a);
$('.bgloader font').text(b);
$('.bgloader .loading').animate({top:'-32px'},1000,function(){
$('.bgloader').fadeOut();
});
});
}else{
$('.bgloader .jindu2').animate({width:c+'px'},500,function(){
$('.bgloader .tip1').text(a);
$('.bgloader font').text(b);
});
}
};

這裡我寫了個loading(a,b),兩個參數分別是顯示加載內容提示信息和加載進度百分比,然後,我用了其他幾個js庫做加載進度測試
. 代碼如下:
<script type="text/javascript">loading('正在加載jQuery UI',30);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">loading('正在加載Chrome Frame',50);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
<script type="text/javascript">loading('正在加載EXTJS',70);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>
<script type="text/javascript">loading('正在加載mootools',90);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<script type="text/javascript">loading('正在加載dojo',100);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>


    XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
    Copyright © DIV+CSS佈局教程網 All Rights Reserved