網頁加載進度條的JS程序開發思路與實際應用

一款好的產品，都須要有一個漂亮的loading界面。lodaing界面不只能給用戶帶來良好的體驗，並且有效的消除了程序加載等待過程當中的枯躁感。 loading進度條更是對當前加載進度的一個良好反饋。從0%-100%的加載進度能夠有效的告知用戶還有多久便可打開頁面。
帶有進度條的loading界面在程序中並不罕見，可是在web中呢？到目前爲止瀏覽器並無提供有效的瀏覽器對象來反饋頁面的加載進度，因此沒法直接、便捷的得到頁面加載進度的反饋。
本文主要是講述如何以經過jquery的方式來實現頁面加載進度的反饋方法。
1、實現邏輯與概念
首先咱們要知道的是，目前沒有任何瀏覽器能夠直接獲取正在加載對象的大小。因此咱們沒法經過數據大小來實現0-100%的加載顯示過程。
因此咱們須要採起加載節點來反饋頁面已經加載到某一段，進行大概的模糊進度反饋來實現進度加載的效果。大體意思是：頁面每加載到指定區域，則返回(n)%的進度結果，經過設置多個節點，來達到一步一步顯示加載進度的目的。
具體是如何設置呢？首先咱們將網頁分紅若干區域，就以 frontopen來講，網站的結構分爲head區域、mian區域（文章主體部分）、sidebar側邊欄、foot腳部 四個部分。考慮作一個範圍粗獷一點 進度反饋效果。以下圖：
將進度反饋設置爲四個部分：head部分返回30%進度，main部分返回60%進度，sidebar部分返回70%進度，最後foot加載完成後返回100%。
2、實現方法
1.首先咱們須要在html頁面中，給進度條設定設定一個容器。例如本博的body下方會有一個「<div class=」loading」></div>」的div容器，這就是後面咱們須要操做並顯示的進度條了，固然你們有興趣的話能夠設置更多有個性的進度條。
2.爲loading容器設定樣式，以本博的進度條爲例，樣式以下：
.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毫秒。
3、插入到頁面中的實際應用示例
以本博模板首頁文件index.php爲例，給你們展現四個節點如何插入到對應的位置。固然這個示例只是爲了更好的解釋上面的程序策劃結論，並不限於這種設置方法。你們在須要的地方能夠發揮更多的想象，觸類旁通創造出更絢麗的樣式。
index.php文件代碼

<?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>
<?php get_sidebar(); ?>  //引用sidebar模板php文件
<script type="text/javascript">
        $('.loading').animate({'width':'78%'},50);  //第三個節點
</script>
<?php get_footer(); ?>  //引用foot模板php文件
<script type="text/javascript">
        $('.loading').animate({'width':'100%'},50);  //第四個節點
</script>

4、程序的補充完善與優化
經過上面三步、已經基本能夠完成整個loading程序的運行。可是進度條加載完成後，沒法自動消失？這固然是不行的了，所以咱們須要使用另一段代碼，在文檔加載完成後將進度條隱藏。
代碼以下：

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

經過以上設置，便可當頁面100%加載完成後，執行jquery的fadeOut函數，將進度條隱藏，完成整個程序的收尾。
結語：本文考慮到便於讀者學習，將代碼儘量的簡化。固然，這個實例也能夠知足多數狀況下的應用了。但願讀者可以經過此實例拓展思路，開發出更加優秀、更增強大的功能。