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

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

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

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

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

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

二、實(shí)現(xiàn)方法

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

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

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