V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LeeReamond
V2EX  ›  前端开发

网页上方的资源加载进度条实现是什么原理?

  •  
  •   LeeReamond · 2022-02-03 22:17:35 +08:00 · 1840 次点击
    这是一个创建于 1027 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,今天看到一个 php 后端渲染页面的项目居然点击跳转的时候页面上方会带资源加载进度条,挺好奇原理的。前端路由的话完全由 js 接管感觉做出进度条还可以理解,后端不是点击跳转页面命令的时候浏览器就会刷新页面会话么,为啥它可以做到进度条逐个显示资源加载,然后加载完了再 reload 页面。。。。

    8 条回复    2023-04-22 16:07:27 +08:00
    vanton
        1
    vanton  
       2022-02-03 22:27:21 +08:00
    1 、setInterval

    2 、websocket
    also24
        2
    also24  
       2022-02-03 22:42:09 +08:00 via Android
    直觉上是 pjax
    HackerJax
        3
    HackerJax  
       2022-02-04 09:35:22 +08:00 via iPhone
    那是假的
    ch2
        4
    ch2  
       2022-02-04 12:01:41 +08:00
    首次请求返回一个几百字节的 html ,它主要负责下载 js 等,下载完之后让位出去,用它来实现进度条很简单
    molvqingtai
        5
    molvqingtai  
       2022-02-04 13:17:27 +08:00 via Android
    假的
    LeeReamond
        6
    LeeReamond  
    OP
       2022-02-04 13:30:33 +08:00
    @ch2 问题跳转就是 A 标签,我看了一下并没接什么骚气的函数,就是普通的跳转
    lete
        7
    lete  
       2023-04-08 22:08:51 +08:00   ❤️ 1
    有兴趣的话,可以看看这个 https://github.com/Lete114/page-load-progress
    houchangxiaowang
        8
    houchangxiaowang  
       2023-04-22 16:07:27 +08:00
    @lete 不错哦,谢谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5493 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 08:47 · PVG 16:47 · LAX 00:47 · JFK 03:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.