jQuery 頁面載入進度條實現(xiàn)代碼
更新時間：2009年02月08日 15:43:09 作者：
頁面 Loading 條基本人人都會用。它的原理很簡單：在頁頭放置一個文字或者圖片的 loading 狀態(tài)，然后頁尾載入一段 JS 隱藏掉，即根據(jù)瀏覽器的載入順序來實現(xiàn)的簡易 Loading 狀態(tài)條。
上圖展示了傳統(tǒng) Wordpress 模板在瀏覽器中的載入順序，Loading 條的出現(xiàn)和消失分布于頭尾。
如果我們在頁面的不同位置放置多個 JS ，每個 JS 用于逐步增加 Loading 條的寬度，那么這個 Loading 條無疑會更具實用價值。它在一定程度上緩解了訪客等待載入的枯燥感，同時還能客觀反映頁面載入的進度。若再配以 jQuery 內(nèi)建的動畫效果，其完全可以與瀏覽器自帶的狀態(tài)條媲美。
先來看一個演示：地址。
要得到演示上的進度條效果，首先，引入 jQuery 框架(一定要放在頁頭 <head> 標簽內(nèi))。然后在 <body> 標簽起始位置放置：
復制代碼 代碼如下:
<div id="loading"><div></div></div>
CSS 可以這么寫：
復制代碼 代碼如下:
#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}
準備工作到這里就做好了。
接著，請隨意發(fā)揮，依照你對圖二的理解，在模板各個部分的適當位置放置：
復制代碼 代碼如下:
<script type="text/javascript">
$("#loading div").animate({width:"16px"})
</script>
其中紅色數(shù)值應(yīng)該隨載入順序逐步增加，直到 footer.php。另外別忘了在 footer.php 最末尾放上：
復制代碼 代碼如下:
<script type="text/javascript">
$("#loading").fadeOut()
</script>
用于載入完畢后隱藏進度條。
您可能感興趣的文章:
- jQuery實現(xiàn)可拖動進度條實例代碼
- jquery 實現(xiàn)拖動文件上傳加載進度條功能
- jquery 簡單的進度條實現(xiàn)代碼
- 6款新穎的jQuery和CSS3進度條插件推薦
- 分享8款優(yōu)秀的 jQuery 加載動畫和進度條插件
- 基于HTML5 Ajax文件上傳進度條如何實現(xiàn)（jquery版本）
- Jquery進度條插件 Progress Bar小問題解決
- Jquery Uploadify上傳帶進度條的簡單實例
- 用jQuery模擬頁面加載進度條的實現(xiàn)代碼
- jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法
- jQuery實現(xiàn)的手動拖動控制進度條效果示例【測試可用】
相關(guān)文章
這篇文章主要介紹了實例講解JQuery中this和$(this)的區(qū)別,this表示當前的上下文對象是一個html對象,可以調(diào)用html對象所擁有的屬性和方法,$(this),代表的上下文對象是一個jquery的上下文對象,可以調(diào)用jquery的方法和屬性值,需要的朋友可以參考下2014-12-12
jQuery是時下最流行的 JavaScript 庫?，F(xiàn)在，除了HTML5以外，也有很多jQuery愛好者使用jQuery來開發(fā)游戲，雖然效果沒有Flash那么好，但是這些游戲也看起來很酷。2011-04-04
對話框（Dialog）是一個特殊的窗口（window），可以包含在頂部的工具欄和在底部的按鈕。接下來通過本文給大家介紹easyui創(chuàng)建對話框的兩種方式，非常不錯，感興趣的朋友一起看下吧2016-08-08
這篇文章主要介紹了基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效，使用非組件方法來實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
有了jquery一切變的如此簡單！讓js做的動畫更有動感。2010-04-04
這篇文章主要介紹了jQuery實現(xiàn)的簡潔下拉菜單導航效果代碼,通過簡單的自定義函數(shù)實現(xiàn)頁面樣式切換功能,非常簡潔實用,需要的朋友可以參考下2015-08-08
這篇文章介紹了用jquery生成二級菜單的代碼，需要的朋友可以參考一下2013-06-06
jquery調(diào)整表格行tr上下順序?qū)嵗v解
這篇文章主要為大家介紹了jquery調(diào)整表格行tr上下順序?qū)嵗?，具有一定的參考價值，感興趣的朋友可以參考一下2016-01-01
這篇文章主要介紹了jQuery獲取DOM節(jié)點的方法,提供了兩種jQuery獲取DOM節(jié)點的技巧,需要的朋友可以參考下2015-12-12
以WordPress為例講解jQuery美化頁面Title的方法
鼠標移動到超鏈接時顯示Title提示即是所謂Title美化的一般手段,這里我們就以WordPress為例講解jQuery美化頁面Title的方法,需要的朋友可以參考下2016-05-05