jQuery 頁(yè)面載入進(jìn)度條實(shí)現(xiàn)代碼
更新時(shí)間：2009年02月08日 15:43:09 作者：
頁(yè)面 Loading 條基本人人都會(huì)用。它的原理很簡(jiǎn)單：在頁(yè)頭放置一個(gè)文字或者圖片的 loading 狀態(tài)，然后頁(yè)尾載入一段 JS 隱藏掉，即根據(jù)瀏覽器的載入順序來實(shí)現(xiàn)的簡(jiǎn)易 Loading 狀態(tài)條。
上圖展示了傳統(tǒng) Wordpress 模板在瀏覽器中的載入順序，Loading 條的出現(xiàn)和消失分布于頭尾。
如果我們?cè)陧?yè)面的不同位置放置多個(gè) JS ，每個(gè) JS 用于逐步增加 Loading 條的寬度，那么這個(gè) Loading 條無疑會(huì)更具實(shí)用價(jià)值。它在一定程度上緩解了訪客等待載入的枯燥感，同時(shí)還能客觀反映頁(yè)面載入的進(jìn)度。若再配以 jQuery 內(nèi)建的動(dòng)畫效果，其完全可以與瀏覽器自帶的狀態(tài)條媲美。
先來看一個(gè)演示：地址。
要得到演示上的進(jìn)度條效果，首先，引入 jQuery 框架(一定要放在頁(yè)頭 <head> 標(biāo)簽內(nèi))。然后在 <body> 標(biāo)簽起始位置放置：
復(fù)制代碼 代碼如下:
<div id="loading"><div></div></div>
CSS 可以這么寫：
復(fù)制代碼 代碼如下:
#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}
準(zhǔn)備工作到這里就做好了。
接著，請(qǐng)隨意發(fā)揮，依照你對(duì)圖二的理解，在模板各個(gè)部分的適當(dāng)位置放置：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$("#loading div").animate({width:"16px"})
</script>
其中紅色數(shù)值應(yīng)該隨載入順序逐步增加，直到 footer.php。另外別忘了在 footer.php 最末尾放上：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$("#loading").fadeOut()
</script>
用于載入完畢后隱藏進(jìn)度條。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)可拖動(dòng)進(jìn)度條實(shí)例代碼
- jquery 實(shí)現(xiàn)拖動(dòng)文件上傳加載進(jìn)度條功能
- jquery 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼
- 6款新穎的jQuery和CSS3進(jìn)度條插件推薦
- 分享8款優(yōu)秀的 jQuery 加載動(dòng)畫和進(jìn)度條插件
- 基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)（jquery版本）
- Jquery進(jìn)度條插件 Progress Bar小問題解決
- Jquery Uploadify上傳帶進(jìn)度條的簡(jiǎn)單實(shí)例
- 用jQuery模擬頁(yè)面加載進(jìn)度條的實(shí)現(xiàn)代碼
- jQuery簡(jiǎn)單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法
- jQuery實(shí)現(xiàn)的手動(dòng)拖動(dòng)控制進(jìn)度條效果示例【測(cè)試可用】
相關(guān)文章
最近我們網(wǎng)站做一個(gè)合作項(xiàng)目要求在頁(yè)面中捕捉回車事件，經(jīng)過好多測(cè)試找到這個(gè)2010-06-06
jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法,涉及jQuery針對(duì)頁(yè)面元素的循環(huán)遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
jQuery使用$獲取對(duì)象后檢查該對(duì)象是否存在的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query使用$獲取對(duì)象后檢查該對(duì)象是否存在的實(shí)現(xiàn)方法。小編覺而挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
很多朋友對(duì)jquery select的操作很有興趣，但網(wǎng)上的東西太多，所以腳本之家特別將Jquery Select操作方法整理下，方便大家查找。2010-05-05
jquery命令匯總,方便使用jquery的朋友，需要的朋友可以收藏下2012-06-06
本節(jié)主要介紹了jQuery提交多個(gè)表單的小技巧,需要的朋友可以參考下2014-07-07
最近在做項(xiàng)目的時(shí)候用到了bootstrap，在使用中發(fā)現(xiàn)其data與jquery的data有些不一樣的地方，記錄一下，分享給大家2014-07-07
這篇文章主要介紹了jQuery插件編寫步驟,詳細(xì)分析了jQuery實(shí)現(xiàn)插件功能的具體步驟與相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery 禁止表單用戶名、密碼自動(dòng)填充功能,需要的朋友可以參考下2017-10-10
jQuery-serialize()輸出序列化form表單值的方法
jQuery-serialize()輸出序列化表單值在工作中很常見也很實(shí)用，于是本人搜集整理了一些，需要了解的朋友可以詳細(xì)參考下2012-12-12