首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
宝塔
V2EX  ›  程序员

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

  •  1
     
  •   showecho · 2018-09-13 15:11:24 +08:00 · 3890 次点击
    这是一个创建于 429 天前的主题,其中的信息可能已经有所发展或是发生改变。
    这种:
    http://images.cnitblog.com/blog/431064/201311/13002148-806a741352f747c6ac61853c868b5cb8.png

    我以为是简单的 js 效果,后面发现不是,因为 js 效果的话只要网页没完全打开就不执行,他这个是网页加载多少进度条就加载多少,这怎么实现?
    26 回复  |  直到 2018-09-14 11:02:17 +08:00
        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 了解一下
        15
    xemtof   2018-09-13 20:30:15 +08:00
    @hitaoguo github 应该用的是跟 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
    应该没办法做真的吧,如果一个网页跳转有好几个数据量不同的请求,怎么做成真的呢?
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   852 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 32ms · UTC 22:29 · PVG 06:29 · LAX 14:29 · JFK 17:29
    ♥ Do have faith in what you're doing.