V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Richard14
V2EX  ›  问与答

如何优雅地实现网页载入等待画面?

  •  
  •   Richard14 · 2022-05-31 18:24:11 +08:00 · 975 次点击
    这是一个创建于 668 天前的主题,其中的信息可能已经有所发展或是发生改变。

    目前是用 vue 开发 spa ,当下在用 vue2 ,尝试在往 3 迁移。

    想问一下页面载入有没有什么最佳实践推荐,希望达到的效果是,网页 html 加载第一时间就进入一个 css 渲染的等待页面,然后后台依次载入 vue 、以及 css 和 js 静态资源依赖,这时候 vue 判断全部加载完了,就把等待页面取消掉,显示正常内容。

    目前 vue2 的做法,想了想感觉上似乎是把 loading 的内容写在 index.html 里?但是往这里写业务相关的内容感觉不太对呀

    6 条回复    2022-05-31 23:41:05 +08:00
    ChefIsAwesome
        1
    ChefIsAwesome  
       2022-05-31 18:52:10 +08:00
    loading 写在 html 里,用最简单的 css 和 svg 实现,相当于原生 app 的 splash screen 。js 加载完了之后隐藏这个 splash screen 。
    做按路由动态加载 js 的时候,把请求页面数据和加载 js 写在一起,并行下载。而不是等 js 加载完了,在那个 js 里头再去请求数据。要充分利用异步的特性。
    Richard14
        2
    Richard14  
    OP
       2022-05-31 18:58:07 +08:00
    @ChefIsAwesome vue 是默认加载完 js 和 css 才会执行 mount 事件吗,如果不是的话如何判断 js 和 css 加载完再触发删除 splash screen 呢
    Richard14
        3
    Richard14  
    OP
       2022-05-31 18:59:02 +08:00
    @ChefIsAwesome 而且还有一个疑惑是,写在 html 里的话,每次刷新页面都会不受控制地默认显示那个加载页面吧。这样的话用户就算不是第一次打开,那个加载页面也会闪一下,感觉不太优雅啊
    ch2
        4
    ch2  
       2022-05-31 19:29:37 +08:00
    @Richard14 #3 "不是第一次打开"这个概念是上了 PWA 才有的,没有上 PWA 的话没法严格监测 js 、css 文件的缓存与否。上了 PWA 你就用 service-worker 控制播放不播放动画就是了,最简单的是监听 fetch 的 url 是不是 js 文件,如果是而且 js 不在缓存里就播动画
    ChefIsAwesome
        5
    ChefIsAwesome  
       2022-05-31 20:19:41 +08:00 via Android
    @Richard14 你用 vue 有个初始化执行 new Vue 什么的文件,那里的代码跑起来了,不就代表 js 加载好了。
    这个闪一下不是加载 HTML 这里独有的。任何有 loading 的地方都可能因为加载太快,导致闪一下。
    所以 loading 一般都做个延时,等待超过 n 毫秒之后才显示。
    TMaize
        6
    TMaize  
       2022-05-31 23:41:05 +08:00
    结合上面的的,可以 Mutation Observer 监听某个特定元素的出现来代表完全渲染好了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2920 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:05 · PVG 22:05 · LAX 07:05 · JFK 10:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.