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

一、實現(xiàn)邏輯與概念

先我們要知道的是，目前沒有任何瀏覽器可以直接獲取正在加載對象的大小。所以我們無法通過數(shù)據(jù)大小來實現(xiàn)0-100%的加載顯示過程。

因此我們需要通過html代碼逐行加載的特性，在整頁代碼的若干個跳躍行數(shù)中設置節(jié)點，進行大概的模糊進度反饋來實現(xiàn)進度加載的效果。大致意思是：頁面每加載到指定區(qū)域，則返回(n)%的進度結果，通過設置多個節(jié)點，來達到一步一步顯示加載進度的目的。

具體是如何設置呢？先我們將網(wǎng)頁分成若干區(qū)域，就以 frontopen來說，網(wǎng)站的結構分為head區(qū)域、mian區(qū)域（文章主體部分）、sidebar側邊欄、foot腳部 四個部分?？紤]做一個范圍粗獷一點 進度反饋效果。如下圖：

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

二、實現(xiàn)方法

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

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

http://79806.xyz/jianzhanzhishi/7936.html 網(wǎng)頁加載進度條的JS程序開發(fā)思路與實際應用