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

一、實現邏輯與概念

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

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

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

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

二、實現方法

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

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

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

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

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

三、插入到頁面中的實際應用示例

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

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);//關閉報錯 get_header();?>//引用模板的頭部PHP文件 <script type="text/javascript"> $('.loading').animate({'width':'33%'},50);//個進度節點 </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);//第二個節點 </script> <?phpget_sidebar();?>//引用sidebar模板php文件 <script type="text/javascript"> $('.loading').animate({'width':'78%'},50);//第三個節點 </script> <?phpget_footer();?>//引用foot模板php文件 <script type="text/javascript"> $('.loading').animate({'width':'100%'},50);//第四個節點 </script>

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

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

通過以上設置，即可當頁面100%加載完成后，執行jquery的fadeOut函數，將進度條隱藏，完成整個程序的收尾。

網站標題：網頁加載進度條的JS程序開發思路與實際應用
標題鏈接：http://m.newbst.com/news49/212949.html

成都網站建設公司_創新互聯，為您提供微信小程序、自適應網站、外貿網站建設、品牌網站制作、Google、網頁設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯