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

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

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

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

    其实你这个起点就有问题。
        3
    jasonyang9   223 天前
    看下 cacti 的源码,它有这个效果。
        4
    maichael   223 天前
    > 因为 js 效果的话只要网页没完全打开就不执行

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

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

    这种一般是假进度条。
        5
    fengmumu   223 天前
    直接写到头里面 内嵌式
        6
    hitaoguo   223 天前
    以前看 github 的顶部有个进度条,后来看了一下代码发现是假的进度条。。。

    如果要我写,我的思路大概是先写一个 AssetsManager 放页面最顶部,然后动态去加载页面需要的资源,按照个数进行百分比显示吧。
        7
    geelaw   223 天前   ♥ 1
    我不知道在你第一次进入 YouTube 的时候会不会有这个现象。

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

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

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

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

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

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