給本身的博客加上一個 LOADING… 進度條，這好像是一個很老很老的話題，兩年前就已經有人用各類方法去實現它了。結合以前的前輩寫的代碼，我重寫了一次。javascript
最初我在 AW 的博客上看到的給頁面加上Loading效果最簡單實用的辦法，他介紹的是使用純的 CSS 跟 JavaScript 實現的效果。html
原理是：在頁面中寫一個 LOADING… 的提示，利用 JavaScript 在 HTML 加載完時給 LOADING… 這個 DIV 設置隱藏。前端
後來在 iShawn 的博客上看到jQuery 頁面載入進度條，用了 jQuery 動畫漂亮不少。java
原理是：在頁面的不一樣位置放置多個 JavaScript 代碼，每一個 JavaScript 代碼逐步增長 LOADING… 的寬度，到最後加載完隱藏。jquery
AW 跟 iShawn 都介紹了 LOADING… 的原理，明白了以後本身動手改造一下吧。我發現 iShawn 的博客的進度條不只是在載入的時候能出現，並且在點擊外部連接以及網頁能的 JavaScript 事件的時候都能出現ajax
爲何要網頁進度條
若是你只想實現效果，這個小層次能夠忽略過去。express
Analytics的統計數據代表，加入了這一效果以後，用戶的「平均停留時間」的確有所提升。可見，一個「正在加載」讓許多用戶都有更多的耐心等待，而不會由於屏幕空白過久而不耐煩地離開。api
via AW瀏覽器
還有一段時來自劉未鵬的：post
進度條的設計是一個不少人都知道的故事：一樣的耗時，若是不給任何進度提示，只是在完成以後才彈出一個完成消息，中間沒有任何動態變化，那麼整個過 程就會讓人等得很是焦急，致使一些人乾脆把程序關了了事。若是有進度不斷更新，那麼對整個過程耗時的心理感覺就會遠低於實際值，用戶也不會鬱悶到把程序關 了。（你有多少次在銀行處理手續的時候，看着工做人員把一堆材料不停地倒騰來去，內心多但願他們能夠在櫃檯小窗口上投影一個進度條？）
這裏的緣由在於，沒有進度提示的話，咱們沒法判斷這個等待何時纔是個盡頭。若是有不斷增加的進度條，那麼咱們對於何時會達到100%就會有 一個粗略的估計，這個估計是一劑定心丸，讓咱們知道這事情總會而且會在不久的未來完成。
via Mind Hacks
網頁進度條能夠增長網站的用戶體驗，不過用戶體驗不是增長一個網頁進度條。
網頁進度條實現原理
原理一：在頁面中放一個用固定定位的 LOADING… 的提示，這個提示能夠是圖片、文字或者一段加載的動畫，利用瀏覽器是先加載完成 HTML 文檔以後加載 CSS 最後加載 JavaScript 的原理，在加載到最後用 JavaScript 把 LOADING… 所在的 DIV 設置隱藏便可。
原理二：根據網頁加載時按照 HTML 文檔中 JavaScript 的前後順序執行，給進度條顯示百分比數字，但這個效果並不完美和準確。
原理三：利用 JavaScript 實現，凡頁面能的 JavaScript 被觸發也顯示 LOADING… ，待事件完成以後隱藏。
網頁進度條的實現辦法
網頁進度條的實現辦法 AW 跟 iShawn 已經在他們的博客上說得很清楚了，效果也便是上面小節的原理一和原理二。我會從新實現一次原理1、二，並且實現原理三的效果，即點擊站內連接、JavaScript 事件顯示 LOADING… 的辦法。
準備工做沒有什麼，最主要的是給網頁加載 jQuery 庫（其實不必定非要 jQuery 實現，但能方便不少）：
在網頁的</body>標籤前插入下面的代碼：
- <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
在網頁的<body>...</body>之間插入<div id="status">LOADING...</div>
CSS 文件能夠這樣寫（後有針對 IE6 的 CSS HACK）：
- #status{
- background:none repeat scroll 00#27BCEF;
- border-bottom:1px solid #888888;
- border-right:1px solid #888888;
- color:#FFFFFF;
- float:right;
- font-size:11px;
- left:45%;
- letter-spacing:2px;
- padding:6px12px;
- position:fixed;
- text-align:center;
- top:20%;
- z-index:999;
- _position:absolute;
- _bottom:auto;
- _top:expression(eval(document.documentElement.scrollTop));
- _margin-top:20%;
- }
JavaScript 文件這樣寫（務必放在 jQuery 庫後面）：
- <script type="text/javascript">
- $('#status').fadeOut(800);
- $("a[rel!='nofollow']a[rel!='external'][target!='_blank']a[class!='load']").click(function(){
- $("#status").fadeIn(400);
- setTimeout(function(){
- $("#status").fadeOut(400)
- },
- 4000)
- });
- $("a[href*='#'],a[rel='external nofollow'],a[href='javascript:void(0)'],a[href='javascript:reset_captcha('')']").click(function(){
- $("#status").fadeOut(400)
- });
- </script>