页面加载进度条实现原理:
将要加载的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>
<?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>
|
四、程序的补充完善与优化
通过上面三步、已经基本可以完成整个loading程序的运行。但是进度条加载完成后,无法自动消失?这当然是不行的了,因此我们需要使用另外一段代码,在文档加载完成后将进度条隐藏。
代码如下:
1
2
3
|
$(document).ready(function(){
$('.loading').fadeOut();
});
|
通过以上设置,即可当页面100%加载完成后,执行jquery的fadeOut函数,将进度条隐藏,完成整个程序的收尾。
咨询相关问题或预约面谈,可以通过以下方式与我们联系
业务热线400-688-6062大客户专线158-1856-1755