如何优雅的实现加载progress bar

曾自己借助阿里云和hexo搭了个站点，现已废弃，过往写的博客暂挪到此处。

---

title: 如何优雅的实现加载bar
date: 2017-05-17 17:46:18
tags:
- 技术
- Javascript

---

根据NProgress源码分析得出

真的可以获取页面加载的百分比么

答案是NO。
JS里并不存在这样的事件或者这样的返回值。

所以我们所见到的加载条是怎么实现的？？

其实是假象

主要是以随机数增加百分比。
在window.onload之前，不达到百分之百。

如何尽量更精确

埋点！
比如在某张图load事件时设置一个具体的百分比，当然也是由个人估算的。

如何更优雅？

1.优雅的过程

随机数并不完全是随机数，根据当前的百分比设置增加的百分比系数；
如果当前百分比低，增加的系数就会大，如果当前百分比高，增加的系数就小。

2.优雅的结束

NProgress在最后一步，达到百分之百的时候，会假装加速一下，再正常的结束。
无处不心理学！给人一种假象确实由于某项东西加载成功了然后才顺利的结束。

包括随机数、和结束前的加速，才让人以为那个百分比是确确实实存在的。作假也要假得像个真的！

3.可配置才能优雅！

* 自定义loading bar样式
* 自定义变化速度，可对自己网站预先估计
* 增加百分比最小值配置，可根据自己网站实际情况而定
* 等等

尽善尽美的技术

1.实现加载bar前进的方式：

1)transition

2)以下三选一，按顺序优先(考虑兼容)
    * transform:translate3d
    * transform:translate
    * margin-left

2.css浏览器兼容

cssPrefixes = [ 'Webkit', 'O', 'Moz', 'ms' ]

NProgress GitHub仓库地址：https://github.com/rstacruz/nprogress