頁(yè)面加載進(jìn)度條實(shí)現原理：
將要加載的js動(dòng)態(tài)的添加到head中，并根據每個(gè)是否加載完成，統計當前一共加載完成的個(gè)數。當每一項都加載完成，加載成功。設置加載失敗時(shí)間。當超過(guò)這個(gè)時(shí)間提示加載失敗。

一、實(shí)現邏輯與概念

先我們要知道的是，目前沒(méi)有任何瀏覽器可以直接獲取正在加載對象的大小。所以我們無(wú)法通過(guò)數據大小來(lái)實(shí)現0-100%的加載顯示過(guò)程。

因此我們需要通過(guò)html代碼逐行加載的特性，在整頁(yè)代碼的若干個(gè)跳躍行數中設置節點(diǎn)，進(jìn)行大概的模糊進(jìn)度反饋來(lái)實(shí)現進(jìn)度加載的效果。大致意思是：頁(yè)面每加載到指定區域，則返回(n)%的進(jìn)度結果，通過(guò)設置多個(gè)節點(diǎn)，來(lái)達到一步一步顯示加載進(jìn)度的目的。

具體是如何設置呢？先我們將網(wǎng)頁(yè)分成若干區域，就以 frontopen來(lái)說(shuō)，網(wǎng)站的結構分為head區域、mian區域（文章主體部分）、sidebar側邊欄、foot腳部 四個(gè)部分。考慮做一個(gè)范圍粗獷一點(diǎn) 進(jìn)度反饋效果。如下圖：

將進(jìn)度反饋設置為四個(gè)部分：head部分返回30%進(jìn)度，main部分返回60%進(jìn)度，sidebar部分返回70%進(jìn)度，后foot加載完成后返回100%。

二、實(shí)現方法

1.先我們需要在html頁(yè)面中，給進(jìn)度條設定設定一個(gè)容器。例如本博的body下方會(huì )有一個(gè)“<div class=”loading”></div>”的div容器，這就是后面我們需要操作并顯示的進(jìn)度條了，當然大家有興趣的話(huà)可以設置更多有個(gè)性的進(jìn)度條。

2.為loading容器設定樣式，以本博的進(jìn)度條為例，樣式如下：

http://ezekroy.com/jianzhanzhishi/7936.html 網(wǎng)頁(yè)加載進(jìn)度條的JS程序開(kāi)發(fā)思路與實(shí)際應用