speed, pace, rate怎么区分呀
发布网友
发布时间：2022-04-22 07:01
共4个回答
懂视网
时间：2022-04-23 01:26
这两个插件都是关于加载进度动画的，应该说各有特点吧，最起码对我来说是各有优势的。今天一天就捣鼓了加载进度动画，也研究了大量的（也就这两个）加载进度动画，也算对加载进度动画有了一个初步的了解了吧。
NProgress.js
NProgress是基于jquery的，且版本要 >1.8
API:
NProgress.start() — 启动进度条
NProgress.set(0.4) — 将进度设置到具体的百分比位置
NProgress.inc() — 少量增加进度
NProgress.done() — 将进度条标为完成状态
引入：
<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" > <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要引入进来
使用：
<script>
$(function() {
NProgress.start();
$(window).load(function() {
NProgress.done();
});
</script>自定义动画样式：
将我们定义的样式写到一个script标签里，这算是一个小技巧吧。
<script type="text" id="myId"><br> <p class="splash card"><br> <p class="lead" style="text-align:center">不要回来，马上走开...</p> <p class="progress"> <p class="mybar" role="bar"> </p> </p> </p><br></script>
这是css
html,body,iframe{
margin: 0;
padding: 0;
}
#nprogress{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #f7f7f7;
z-index: 999;
}
.spinner-icon{
display: none!important;
}
.splash {
position:absolute;
top:40%;
left:0;
right:0;
margin: auto;
}
.splash img {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 100px;
}
.card {
background-color: #f7f7f7;
padding: 20px 25px 15px;
margin: 0 auto 25px;
width: 380px;
}
.mybar {
background: #29d;
height:10px;
}
.progress {
height: 10px;
overflow: hidden;
}js代码变成了这样：
<script type="text/javascript">
$(function(){
NProgress.configure({
template: $('#myId').html() // template是用来设置动画样式的属性
});
NProgress.start();
});
$(window).load(function(){
NProgress.done();
})
</script>总结：在js里控制动画什么时候开始，什么时候结束，已及加载的动画样式。
在自定义样式里关键的两个指针就是 role 属性：
role=bar ：横向加载条
role=spinner 旋转的小圈
样例2：（省略了css）
<script type="text" id="myId"> <em id="__mceDel"><em id="__mceDel"><p class="bar" role="bar" style="display=block"><br> <p class="peg"></p><br> </p><br> <p class="spinner" role="spinner"><br> <p class="spinner-icon"></p><br> </p></em></em> </script>
pace.js：
API：
Pace.start：开始显示进度条，如果你不是使用AMD或者Browserify来加载模块的话，这个会默认执行。
Pace.restart：进度条重新加载以及显示。
Pace.stop：隐藏进度条以及停止加载。
Pace.track：监测一个或者多个请求任务。
Pace.ignore：忽略一个或者多个请求任务。
用法：
<head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow" rel="stylesheet" /> <br> <!-- 此处的css样式就决定了加载进度动画的样式 --> </head>
改变动画样式：
pace里已经设计好了许多种加载进度动画，只需要变化css文件就可以了
总结：
pace的优点有直接引入文件就可以了，不需要在自己写任何代码，就自带了加载进度动画，只是有一个缺点，官网提供的加载进度动画都没有遮罩层。
当然，可以自己进行设置（我不会）；
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue.js中如何使用ajax渲染页面
ajax请求+vue.js渲染+页面加载
如何解决Vue.js显示数据的时,页面闪现
热心网友
时间：2022-04-22 22:34
一、词义辨析不一样
1、speed n. 速度，速率
〔辨析〕普通用词，指交通工具等运动的速率或事情发生的速度。
〔例证〕The train went by at high speed.
火车疾驶而过。
2、pace n. 步速，速度
〔辨析〕指人步行的速度，常引申为生活、变化等的速度。
〔例证〕He quickened his pace.
他加快了步伐。
3、rate n. 速度，速率
〔辨析〕常指某事在一段时间内发生的速度，可与 speed 换用。
〔例证〕His money was running out at an alarming rate/speed.
他的钱用得很快，速度惊人。
二、词义广泛性不一样
1、speed
英 [spiːd] 美 [spid]
1）v. 超速，加速；加速，迅速前行；兴隆；兴奋剂成瘾
2）n. 速度，速率；迅速，快速；昌盛，繁荣；感光度；排挡；安非他明
2、pace
英 [peɪs] 美 [pes]
1）v. 踱步；缓慢而行
2）n. 一步；步速；步伐；速度
3、rate
英 [reɪt] 美 [ret]
1）n. 比率，率；速度；价格；等级
2）v. 认为；估价；责骂
三、变形词不一样
1、speed
第三人称单数： speeds 复数： speeds 现在分词： speeding 过去式： sped speeded 过去分词： sped speeded
2、pace
第三人称单数： paces 复数： paces 现在分词： pacing 过去式： paced 过去分词： paced
3、rate
第三人称单数： rates 复数： rates 现在分词： rating 过去式： rated 过去分词： rated
热心网友
时间：2022-04-22 23:52
speed 1.n.运动的速度、速率：He reced speed and turned left.
2.n.(发生或进行的）速度、进度：the processing speed of the computer
3.n.快、迅速：The accident was e to excessive speed.
pace 1.n.（移动的）速度、步速：to set off at a steady pace
2.n.发生的速度、步伐、节奏：It is difficult to keep up with the rapid pace of change.
3.n.走出的一步、步幅、一步的距离
4.n.迅速出现（或变化等）、快节奏：The novel lacks pace.
5.v.来回踱步、走来走去/调整节奏
rate 1.n.速度、进度：at an average rate of 5 kilometres
2.n.比率、率：a rising rate of unemployment
3.
热心网友
时间：2022-04-23 01:27
pace一般表示步伐，步伐节奏
rate强调比例和比率，有百分比的含义
speed就是平常所指的速度，比如车速等等
