网页加载进度条的JS程序开发思路与实际应用

页面加载进度条实现原理：
将要加载的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程序开发思路与实际应用
标题链接：https://www.cdcxhl.com/news49/212949.html

成都网站建设公司_创新互联，为您提供微信小程序、自适应网站、外贸网站建设、品牌网站制作、Google、网页设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联