文档章节

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

武文海
 武文海
发布于 2015/07/01 10:37
字数 1458
阅读 164
收藏 11

一款好的产品,都需要有一个漂亮的loading界面。lodaing界面不仅能给用户带来良好的体验,而且有效的消除了程序加载等待过程中的枯躁感。 loading进度条更是对当前加载进度的一个良好反馈。从0%-100%的加载进度可以有效的告知用户还有多久即可打开页面。
带有进度条的loading界面在程序中并不罕见,但是在web中呢?到目前为止浏览器并没有提供有效的浏览器对象来反馈页面的加载进度,所以无法直接、便捷的获得页面加载进度的反馈。
本文主要是讲述如何以通过jquery的方式来实现页面加载进度的反馈方法。
一、实现逻辑与概念
首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现0-100%的加载显示过程。
所以我们需要采取加载节点来反馈页面已经加载到某一段,进行大概的模糊进度反馈来实现进度加载的效果。大致意思是:页面每加载到指定区域,则返回(n)%的进度结果,通过设置多个节点,来达到一步一步显示加载进度的目的。
具体是如何设置呢?首先我们将网页分成若干区域,就以 frontopen来说,网站的结构分为head区域、mian区域(文章主体部分)、sidebar侧边栏、foot脚部 四个部分。考虑做一个范围粗犷一点 进度反馈效果。如下图:
将进度反馈设置为四个部分:head部分返回30%进度,main部分返回60%进度,sidebar部分返回70%进度,最后foot加载完成后返回100%。
二、实现方法
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毫秒。
三、插入到页面中的实际应用示例
以本博模板首页文件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>

四、程序的补充完善与优化
通过上面三步、已经基本可以完成整个loading程序的运行。但是进度条加载完成后,无法自动消失?这当然是不行的了,因此我们需要使用另外一段代码,在文档加载完成后将进度条隐藏。
代码如下:

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

通过以上设置,即可当页面100%加载完成后,执行jquery的fadeOut函数,将进度条隐藏,完成整个程序的收尾。
结语:本文考虑到便于读者学习,将代码尽可能的简化。当然,这个实例也可以满足多数情况下的应用了。希望读者能够通过此实例拓展思路,开发出更加优秀、更加强大的功能。

本文转载自:http://www.douban.com/note/287287255/

武文海
粉丝 13
博文 97
码字总数 49318
作品 0
成都
高级程序员
私信 提问
Android WebView基本使用

WebView介绍 Android WebView在Android平台上是一个特殊的View, 基于webkit引擎、展现web页面的控件,这个类可以被用来在你的app中仅仅显示一张在线的网页,还可以用来开发浏览器。WebView...

临江仙卜算子
2018/07/06
42
0
iOS与H5交互(WKWbebView)

前言: 在iOS开发中,或多或少的会嵌入一些H5页面,有时候需要原生代码和H5页面进行交互。iOS8开始苹果推出性能更强大的WKWebView,所以一下方法是关于WKWebView与JS的交互。 创建WKWebView: ...

hello_小磊
02/22
0
0
iOS WKWebView UI增强(上拉刷新,JS交互,加载进度条)

iOS WKWebView UI增强(上拉刷新,JS交互,加载进度条) 需求:WKWebView的一些增加模块,例如上拉刷新,JS交互,加载进度条等等持续更新 阅读前提: } catch(error) { } } (void)headerRefres...

__小___东邪___
2018/11/06
0
0
JavaScript插件——pace.js的快速掌握

我们在做项目的时候,可能遇到制作 网页进度条加载 的需求。如果你感觉无从下手,那么你可以通过阅读这篇文章,快速掌握一款好用的JavaScript插件,来快速制作出炫酷的 网页进度条加载效果。...

振礼硕晨
2018/08/13
0
0
前端用什么最省力? 最好的弹窗组件 js

js 框架: vue.js web弹层组件 当属layer.js 非常强大 简单易用 使用例子: [http://layer.layui.com/] 分页组件: laypage 【[http://laypage.layui.com] 】) 非常强大 pace.js – 网页自动...

猿神出窍
2016/11/08
1
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周四乱弹 —— 干啥啥不行,吃饭第一名。

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 : 李白到杜甫家吃饭。杜甫洗菜,发现只有青瓜和萝卜,心中愧疚。这时,他看见了邻居家的鸡,杜甫一时心酸,忍不住喃喃自语:我希望...

小小编辑
34分钟前
352
8
Java描述设计模式(08):桥接模式

本文源码:GitHub·点这里 || GitEE·点这里 一、桥接模式简介 1、基础描述 桥梁模式是对象的结构模式。又称为柄体(Handle and Body)模式或接口(Interface)模式。桥梁模式的用意是“将抽象化...

知了一笑
34分钟前
6
0
C++ 函数指针的用法

天王盖地虎626
48分钟前
3
0
白话比原链跨链技术

随着Bystack的主侧链架构的推出,主侧链之间的跨链问题也成为比原链团队的主要攻克工程难题,当前比原链已经推出了两种跨链的机制,各有不同的侧重点,可能因为本身的跨链技术比较晦涩,本篇...

比原链Bytom
56分钟前
4
0
PostgreSQL参数search_path影响及作用

search_path稍微熟悉PG就会用到,用法这里就不必讲,本篇主要讲它在程序里怎样处理。 1、GUC参数定义 这是个 config_string 参数 {{"search_path", PGC_USERSET, CLIENT_CONN_STATEMENT,...

有理想的猪
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部