頁(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)度條為例，樣式如下：

1 2 3 4 5 6 7 .loading{ background:#FF6100; //設(shè)置進(jìn)度條的顏色 height:5px;//設(shè)置進(jìn)度條的高度 position:fixed;//設(shè)定進(jìn)度條跟隨屏幕滾動(dòng) top:0;//將進(jìn)度條固定在頁(yè)面頂部 z-index:99999//提高進(jìn)度條的優(yōu)先層級(jí)，避免被其他層遮擋 }

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

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

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

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

index.php文件代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <?php /** * The main template file. * * This is the most generic template file in a WordPress theme * and one of the two required files for a theme (the other being style.css). * It is used to display a page when nothing more specific matches a query. * E.g., it puts together the home page when no home.php file exists. * Learn more: http://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ ini_set('display_errors',false);//關(guān)閉報(bào)錯(cuò) get_header();?>//引用模板的頭部PHP文件 <script type="text/javascript"> $('.loading').animate({'width':'33%'},50);//個(gè)進(jìn)度節(jié)點(diǎn) </script> <div class="main"> <?php /* Run the loop to output the posts. * If you want to overload this in a child theme then include a file * called loop-index.php and that will be used instead. */ get_template_part('loop','index'); ?> </div><!--#main --> <script type="text/javascript"> $('.loading').animate({'width':'55%'},50);//第二個(gè)節(jié)點(diǎn) </script> <?phpget_sidebar();?>//引用sidebar模板php文件 <script type="text/javascript"> $('.loading').animate({'width':'78%'},50);//第三個(gè)節(jié)點(diǎn) </script> <?phpget_footer();?>//引用foot模板php文件 <script type="text/javascript"> $('.loading').animate({'width':'100%'},50);//第四個(gè)節(jié)點(diǎn) </script>

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

1 2 3 $(document).ready(function(){ $('.loading').fadeOut(); });

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

網(wǎng)站標(biāo)題：網(wǎng)頁(yè)加載進(jìn)度條的JS程序開(kāi)發(fā)思路與實(shí)際應(yīng)用
標(biāo)題鏈接：http://aaarwkj.com/news49/212949.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、自適應(yīng)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、Google、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)