網(wǎng)頁加載進(jìn)度條的JS程序開發(fā)思路與實際應(yīng)用

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

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

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

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

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

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

二、實現(xiàn)方法

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

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

3.通過jquery的animate動畫效果，來實現(xiàn)進(jìn)度條的動畫加載過程。簡單的進(jìn)行構(gòu)思，決定使用由左向右的加載效果。終animate的執(zhí)行代碼為“$(‘.loading’).animate({‘width':’100%’},200);”

4.思考需要設(shè)置幾個加載進(jìn)度節(jié)點。上面通過構(gòu)思，我們已經(jīng)決定使用30%、60%、70%、100%四個進(jìn)度節(jié)點，分別插入到對應(yīng)的頁面位置。并結(jié)合上面的animate動畫代碼，終確定四個進(jìn)度節(jié)點的代碼為：$(‘.loading’).animate({‘width':’30%’},50) 、 $(‘.loading’).animate({‘width':’60%’},50) 、 $(‘.loading’).animate({‘width':’70%’},50) 、 $(‘.loading’).animate({‘width':’100%’},50)。 可能大家會問，為什么速度變成了50毫秒？因為之前一步加載為100%的動畫被分成份，所以為了保證動畫的連貫性，將其每份切分成為50毫秒。

三、插入到頁面中的實際應(yīng)用示例

以本博模板頁文件index.php為例，給大家展示四個節(jié)點如何插入到對應(yīng)的位置。當(dāng)然這個示例只是為了更好的解釋上面的程序策劃結(jié)論，并不限于這種設(shè)置方法。大家在需要的地方可以發(fā)揮更多的想象，舉一反三創(chuàng)造出更絢麗的樣式。

index.php文件代碼

四、程序的補(bǔ)充完善與優(yōu)化
通過上面三步、已經(jīng)基本可以完成整個loading程序的運(yùn)行。但是進(jìn)度條加載完成后，無法自動消失？這當(dāng)然是不行的了，因此我們需要使用另外一段代碼，在文檔加載完成后將進(jìn)度條隱藏。
代碼如下：

通過以上設(shè)置，即可當(dāng)頁面100%加載完成后，執(zhí)行jquery的fadeOut函數(shù)，將進(jìn)度條隱藏，完成整個程序的收尾。