文档章节

页面加载进度条pace.js

r
 raykaeso
发布于 2016/04/07 14:31
字数 266
阅读 108
收藏 0
Pace.js是一个非常有意思的 js插件,可以自动的监听页面的加载数据,并且能够定制加载条。最重要的一点,它还可以监测到ajax的调用并且出现加载条提示。它还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约、闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果)。

1、引入插件相关的Pace.js和Pace.css
[cc lang="html" escaped="true"]<script src="/pace/pace.js"></script>
<link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />[/cc]
这样基本的就可以了。当然也支持自定义

2、Pace.js配置,监听的元素:Ajax、Elements、Document、Event Lag
在引入之前,写下一下文件,
[cc lang="javascript" escaped="true"]paceOptions = {
ajax: false, // disabled
document: false, // disabled
eventLag: false, // disabled
elements: {
selectors: ['.my-page']
}
restartOnRequestAfter: false }[/cc]
或者直接在标签里面定义属性
[cc lang="javascript" escaped="true"]<script data-pace-options='{ "ajax": false }' src='pace.js'></script>[/cc]

pace.js官网:http://github.hubspot.com/pace/
附: css3动画库animate.css介绍和使用

本文转载自:http://blog.csdn.net/u012558554/article/details/51072394

r
粉丝 1
博文 68
码字总数 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
0
0
XiaoBingBy/TeaCMS

#TeaCMS #感谢 感谢所有对本项目做出贡献的人员 预览地址---http://ip/ 后台地址---https://ip/admin/login.html ---账号:user---密码:admin123456 #TeaCMS功能描述 #技术选择 后端 Spring S...

XiaoBingBy
2017/05/02
0
0
网页加载进度条的JS程序开发思路与实际应用

一款好的产品,都需要有一个漂亮的loading界面。lodaing界面不仅能给用户带来良好的体验,而且有效的消除了程序加载等待过程中的枯躁感。 loading进度条更是对当前加载进度的一个良好反馈。从...

武文海
2015/07/01
0
0
UI 设计的反模式:网站加载条

网站加载进度条出现在越来越多的各类网站中 。然而使用这种模式真的是一种很糟糕的主意,因为它复制了已经存在的结合了分散认知注意力的功能。 我第一次遇到这样的进度条是在我之前的项目中...

oschina
2013/08/26
511
1

没有更多内容

加载失败,请刷新页面

加载更多

JWT学习总结

官方 https://jwt.io 英文原版 https://www.ietf.org/rfc/rfc7519.txt 或 https://tools.ietf.org/html/rfc7519 中文翻译 https://www.jianshu.com/p/10f5161dd9df 1. 概述 JSON Web Token(......

冷基
今天
4
0
AOP的学习(1)

AOP 理解AOP编程思想(面向方法、面向切面) spring AOP的概念 方面 -- 功能 目标 -- 原有方法 通知 -- 对原有方法增强的方法 连接点 -- 可以用来连接通知的地方(方法) 切入点 -- 将用来插入...

太猪-YJ
今天
4
0
一张图看懂亮度、明度、光度、光亮度、明亮度

亮度、明度、光亮度,Luminance和Brightness、lightness其实都是一个意思,只是起名字太难了。 提出一个颜色模型后,由于明度的取值与别人的不同,为了表示区别所以就另想一个词而已。 因此在...

linsk1998
昨天
11
0
Python应用:python链表示例

前言 python链表应用源码示例,需要用到python os模块方法、函数和类的应用。 首先,先简单的来了解下什么是链表?链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是...

python小白1
昨天
5
0
Source Insight加载源码

Source Insight是一个图形化的源代码查看工具(当然也可以作为编译工具)。如果一个项目的源代码较多,此工具可以很方便地查找到源代码自建的依赖关系。 1.创建工程 下图为Snort源代码的文件...

天王盖地虎626
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部