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
应该没办法做真的吧,如果一个网页跳转有好几个数据量不同的请求,怎么做成真的呢?
|