这是一个创建于 2296 天前的主题，其中的信息可能已经有所发展或是发生改变。
这种：
http://images.cnitblog.com/blog/431064/201311/13002148-806a741352f747c6ac61853c868b5cb8.png
我以为是简单的 js 效果，后面发现不是，因为 js 效果的话只要网页没完全打开就不执行，他这个是网页加载多少进度条就加载多少，这怎么实现？
http://images.cnitblog.com/blog/431064/201311/13002148-806a741352f747c6ac61853c868b5cb8.png
我以为是简单的 js 效果，后面发现不是，因为 js 效果的话只要网页没完全打开就不执行，他这个是网页加载多少进度条就加载多少，这怎么实现？
 |
1
rust 2018-09-13 15:25:46 +08:00
图打不开
|
 |
2
wxsm 2018-09-13 15:28:39 +08:00
> 因为 js 效果的话只要网页没完全打开就不执行
其实你这个起点就有问题。 |
 |
3
jasonyang9 2018-09-13 15:30:29 +08:00
看下 cacti 的源码，它有这个效果。
|
 |
4
maichael 2018-09-13 15:30:45 +08:00
> 因为 js 效果的话只要网页没完全打开就不执行
同楼上，你这个理解有问题。 > 网页加载多少进度条就加载多少 这种一般是假进度条。 |
 |
5
fengmumu 2018-09-13 15:32:29 +08:00
直接写到头里面 内嵌式
|
 |
6
hitaoguo 2018-09-13 15:33:51 +08:00
以前看 github 的顶部有个进度条，后来看了一下代码发现是假的进度条。。。
如果要我写，我的思路大概是先写一个 AssetsManager 放页面最顶部，然后动态去加载页面需要的资源，按照个数进行百分比显示吧。 |
 |
7
geelaw 2018-09-13 15:35:47 +08:00  1
我不知道在你第一次进入 YouTube 的时候会不会有这个现象。
但如果你在说 YouTube 页面上点另一个 YouTube 里面的链接，实际上 YouTube 的做法是用 AJAX 加载新的内容，这样就可以汇报进度，加载完毕后替换当前页面内容并操纵浏览器历史。这样的好处是提高加载速度。 实际上新浪微博有些地方也是这样做的，比如从“我的关注列表”页面点“我的粉丝”，实际上改变的只有页面上一部分内容和浏览器历史。 |
 |
8
whypool 2018-09-13 15:36:42 +08:00
第一种实现方式，服务端渲染，这个和之前后端模板渲染不一样，是先准备数据，再执行跳转，参考 GitHub
第二种就比较简单，css 写的假的进度条，文档最后判断 document complete 状态取消 css 动画就行，大部分是这样做的，参考知乎 |
|
9
geelaw 2018-09-13 15:38:09 +08:00
@geelaw #7 此外想做着陆页进度条也不困难。
思路 1：在文档最开始放上进度条的元素和进度条的样式，文档每过一段都用一个 script 去修改进度条的元素的 attribute。 思路 2：（实际上就是 #7 提到的方法）你的文档是一个 single-page application，最初的请求只会放一个壳子和 loader 的逻辑，然后用 AJAX 请求实际的内容。 |
 |
10
pkoukk 2018-09-13 19:03:56 +08:00 1
一般大部分进度条都是假的，如果网络条件不好，它们一般都会卡在 99%的地方
|
 |
11
agagega 2018-09-13 19:18:19 +08:00 via iPhone
xhr 可以拿到进度的好像
|
 |
12
VDimos 2018-09-13 19:36:05 +08:00 via Android 1
假的，开始加载时开始进度条，进度条随机跑，但最后一点儿会特别慢，几乎不动，直到你手动调用把它结束，就会到底
|
 |
13
o0 2018-09-13 19:53:01 +08:00
NProgress
|
 |
14
xemtof 2018-09-13 20:29:29 +08:00 1
turbolinks 了解一下
|
 |
16
strugglexiang 2018-09-13 20:33:05 +08:00 via Android
@xemtof 了解
|
 |
17
FakeLeung 2018-09-13 20:46:29 +08:00 via Android 1
其实就是假的进度条，已经有很多现成的库了。
搜索关键字，JS YouTube 进度条 |
 |
18
zthxxx 2018-09-13 21:11:28 +08:00
> 因为 js 效果的话只要网页没完全打开就不执行
建议学一下浏览器渲染过程 |
 |
19
dalieba 2018-09-13 21:36:38 +08:00 via Android
这里有个 Firefox 附加组件做出来了，点击主页就能看见源代码，楼主可以研究下。
https://addons.mozilla.org/zh-CN/android/addon/load-progress-bar/ |
 |
20
xieranmaya 2018-09-13 22:08:40 +08:00 via Android
pace.js
progress.js 一般都是前端路由的网站才会用。 做法一般是统计页面跳转过程中的 ajax 请求数量，然后计算比例显示到页面上，所有的请求都 ok 了就拉到 100%然后去掉它。 |
 |
21
wohenyingyu03 2018-09-13 22:38:49 +08:00
记得有些进度条的效果，完全静止的时候看起来却有种缓慢前进的错觉，让人产生无限耐心……
|
 |
22
zhzer 2018-09-13 22:52:24 +08:00
那种是安慰剂吧？
|
 |
23
ithou 2018-09-13 23:05:22 +08:00 via Android
hexo 可以实现进度条
|
 |
24
ShareDuck 2018-09-14 09:43:35 +08:00
浏览器是一边加载一边渲染、执行的。你的 js 写在 head 内，就很快执行了。
|
 |
25
NEETLEE 2018-09-14 10:46:42 +08:00
xhr 是可以拿到进度的，那些 ajax 上传文件显示进度也是因此而实现的，所以现在 vue 之类的 js 框架实现的进度条是真实的哦
|
 |
26
xianxiaobo 2018-09-14 11:02:17 +08:00
应该没办法做真的吧，如果一个网页跳转有好几个数据量不同的请求，怎么做成真的呢？
|
Select Language