网页加载进度条的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函数，将进度条隐藏，完成整个程序的收尾。
结语：本文考虑到便于读者学习，将代码尽量的简化。固然，这个实例也能够知足多数状况下的应用了。但愿读者可以经过此实例拓展思路，开发出更加优秀、更增强大的功能。