网页打开的顶部进度条是怎么做的？

[showecho]

这种：
http://images.cnitblog.com/blog/431064/201311/13002148-806a741352f747c6ac61853c868b5cb8.png

我以为是简单的 js 效果，后面发现不是，因为 js 效果的话只要网页没完全打开就不执行，他这个是网页加载多少进度条就加载多少，这怎么实现？

[rust]

图打不开

[wxsm]

> 因为 js 效果的话只要网页没完全打开就不执行

其实你这个起点就有问题。

[jasonyang9]

看下 cacti 的源码，它有这个效果。

[maichael]

> 因为 js 效果的话只要网页没完全打开就不执行

同楼上，你这个理解有问题。

> 网页加载多少进度条就加载多少

这种一般是假进度条。

[fengmumu]

直接写到头里面 内嵌式

[hitaoguo]

以前看 github 的顶部有个进度条，后来看了一下代码发现是假的进度条。。。

如果要我写，我的思路大概是先写一个 AssetsManager 放页面最顶部，然后动态去加载页面需要的资源，按照个数进行百分比显示吧。

[geelaw]

我不知道在你第一次进入 YouTube 的时候会不会有这个现象。

但如果你在说 YouTube 页面上点另一个 YouTube 里面的链接，实际上 YouTube 的做法是用 AJAX 加载新的内容，这样就可以汇报进度，加载完毕后替换当前页面内容并操纵浏览器历史。这样的好处是提高加载速度。

实际上新浪微博有些地方也是这样做的，比如从“我的关注列表”页面点“我的粉丝”，实际上改变的只有页面上一部分内容和浏览器历史。

[whypool]

第一种实现方式，服务端渲染，这个和之前后端模板渲染不一样，是先准备数据，再执行跳转，参考 GitHub

第二种就比较简单，css 写的假的进度条，文档最后判断 document complete 状态取消 css 动画就行，大部分是这样做的，参考知乎

[geelaw]

@geelaw #7 此外想做着陆页进度条也不困难。

思路 1：在文档最开始放上进度条的元素和进度条的样式，文档每过一段都用一个 script 去修改进度条的元素的 attribute。

思路 2：（实际上就是 #7 提到的方法）你的文档是一个 single-page application，最初的请求只会放一个壳子和 loader 的逻辑，然后用 AJAX 请求实际的内容。

[pkoukk]

一般大部分进度条都是假的，如果网络条件不好，它们一般都会卡在 99%的地方

[agagega]

xhr 可以拿到进度的好像

[VDimos]

假的，开始加载时开始进度条，进度条随机跑，但最后一点儿会特别慢，几乎不动，直到你手动调用把它结束，就会到底

[o0]

NProgress

[xemtof]

turbolinks 了解一下

[xemtof]

@hitaoguo github 应该用的是跟 turbolinks 技术一样的。

[strugglexiang]

@xemtof 了解

[FakeLeung]

其实就是假的进度条，已经有很多现成的库了。
搜索关键字，JS YouTube 进度条

[zthxxx]

> 因为 js 效果的话只要网页没完全打开就不执行

建议学一下浏览器渲染过程

[dalieba]

这里有个 Firefox 附加组件做出来了，点击主页就能看见源代码，楼主可以研究下。
https://addons.mozilla.org/zh-CN/android/addon/load-progress-bar/

[xieranmaya]

pace.js
progress.js
一般都是前端路由的网站才会用。
做法一般是统计页面跳转过程中的 ajax 请求数量，然后计算比例显示到页面上，所有的请求都 ok 了就拉到 100%然后去掉它。

[wohenyingyu03]

记得有些进度条的效果，完全静止的时候看起来却有种缓慢前进的错觉，让人产生无限耐心……

[zhzer]

那种是安慰剂吧？

[ithou]

hexo 可以实现进度条

[ShareDuck]

浏览器是一边加载一边渲染、执行的。你的 js 写在 head 内，就很快执行了。

[NEETLEE]

xhr 是可以拿到进度的，那些 ajax 上传文件显示进度也是因此而实现的，所以现在 vue 之类的 js 框架实现的进度条是真实的哦

[xianxiaobo]

应该没办法做真的吧，如果一个网页跳转有好几个数据量不同的请求，怎么做成真的呢？