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

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

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

    我以为是简单的 js 效果,后面发现不是,因为 js 效果的话只要网页没完全打开就不执行,他这个是网页加载多少进度条就加载多少,这怎么实现?
    26 条回复    2018-09-14 11:02:17 +08:00
    rust
        1
    rust  
       2018-09-13 15:25:46 +08:00
    图打不开
    wxsm
        2
    wxsm  
       2018-09-13 15:28:39 +08:00
    > 因为 js 效果的话只要网页没完全打开就不执行

    其实你这个起点就有问题。
    jasonyang9
        3
    jasonyang9  
       2018-09-13 15:30:29 +08:00
    看下 cacti 的源码,它有这个效果。
    maichael
        4
    maichael  
       2018-09-13 15:30:45 +08:00
    > 因为 js 效果的话只要网页没完全打开就不执行

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

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

    这种一般是假进度条。
    fengmumu
        5
    fengmumu  
       2018-09-13 15:32:29 +08:00
    直接写到头里面 内嵌式
    hitaoguo
        6
    hitaoguo  
       2018-09-13 15:33:51 +08:00
    以前看 github 的顶部有个进度条,后来看了一下代码发现是假的进度条。。。

    如果要我写,我的思路大概是先写一个 AssetsManager 放页面最顶部,然后动态去加载页面需要的资源,按照个数进行百分比显示吧。
    geelaw
        7
    geelaw  
       2018-09-13 15:35:47 +08:00   ❤️ 1
    我不知道在你第一次进入 YouTube 的时候会不会有这个现象。

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

    实际上新浪微博有些地方也是这样做的,比如从“我的关注列表”页面点“我的粉丝”,实际上改变的只有页面上一部分内容和浏览器历史。
    whypool
        8
    whypool  
       2018-09-13 15:36:42 +08:00
    第一种实现方式,服务端渲染,这个和之前后端模板渲染不一样,是先准备数据,再执行跳转,参考 GitHub

    第二种就比较简单,css 写的假的进度条,文档最后判断 document complete 状态取消 css 动画就行,大部分是这样做的,参考知乎
    geelaw
        9
    geelaw  
       2018-09-13 15:38:09 +08:00
    @geelaw #7 此外想做着陆页进度条也不困难。

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

    思路 2:(实际上就是 #7 提到的方法)你的文档是一个 single-page application,最初的请求只会放一个壳子和 loader 的逻辑,然后用 AJAX 请求实际的内容。
    pkoukk
        10
    pkoukk  
       2018-09-13 19:03:56 +08:00   ❤️ 1
    一般大部分进度条都是假的,如果网络条件不好,它们一般都会卡在 99%的地方
    agagega
        11
    agagega  
       2018-09-13 19:18:19 +08:00 via iPhone
    xhr 可以拿到进度的好像
    VDimos
        12
    VDimos  
       2018-09-13 19:36:05 +08:00 via Android   ❤️ 1
    假的,开始加载时开始进度条,进度条随机跑,但最后一点儿会特别慢,几乎不动,直到你手动调用把它结束,就会到底
    o0
        13
    o0  
       2018-09-13 19:53:01 +08:00
    NProgress
    xemtof
        14
    xemtof  
       2018-09-13 20:29:29 +08:00   ❤️ 1
    turbolinks 了解一下
    xemtof
        15
    xemtof  
       2018-09-13 20:30:15 +08:00
    @hitaoguo github 应该用的是跟 turbolinks 技术一样的。
    strugglexiang
        16
    strugglexiang  
       2018-09-13 20:33:05 +08:00 via Android
    @xemtof 了解
    FakeLeung
        17
    FakeLeung  
       2018-09-13 20:46:29 +08:00 via Android   ❤️ 1
    其实就是假的进度条,已经有很多现成的库了。
    搜索关键字,JS YouTube 进度条
    zthxxx
        18
    zthxxx  
       2018-09-13 21:11:28 +08:00
    > 因为 js 效果的话只要网页没完全打开就不执行

    建议学一下浏览器渲染过程
    dalieba
        19
    dalieba  
       2018-09-13 21:36:38 +08:00 via Android
    这里有个 Firefox 附加组件做出来了,点击主页就能看见源代码,楼主可以研究下。
    https://addons.mozilla.org/zh-CN/android/addon/load-progress-bar/
    xieranmaya
        20
    xieranmaya  
       2018-09-13 22:08:40 +08:00 via Android
    pace.js
    progress.js
    一般都是前端路由的网站才会用。
    做法一般是统计页面跳转过程中的 ajax 请求数量,然后计算比例显示到页面上,所有的请求都 ok 了就拉到 100%然后去掉它。
    wohenyingyu03
        21
    wohenyingyu03  
       2018-09-13 22:38:49 +08:00
    记得有些进度条的效果,完全静止的时候看起来却有种缓慢前进的错觉,让人产生无限耐心……
    zhzer
        22
    zhzer  
       2018-09-13 22:52:24 +08:00
    那种是安慰剂吧?
    ithou
        23
    ithou  
       2018-09-13 23:05:22 +08:00 via Android
    hexo 可以实现进度条
    ShareDuck
        24
    ShareDuck  
       2018-09-14 09:43:35 +08:00
    浏览器是一边加载一边渲染、执行的。你的 js 写在 head 内,就很快执行了。
    NEETLEE
        25
    NEETLEE  
       2018-09-14 10:46:42 +08:00
    xhr 是可以拿到进度的,那些 ajax 上传文件显示进度也是因此而实现的,所以现在 vue 之类的 js 框架实现的进度条是真实的哦
    xianxiaobo
        26
    xianxiaobo  
       2018-09-14 11:02:17 +08:00
    应该没办法做真的吧,如果一个网页跳转有好几个数据量不同的请求,怎么做成真的呢?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3117 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 13:55 · PVG 21:55 · LAX 05:55 · JFK 08:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.