前端Vue、H5、Web、Html等待页面的快速显示以及代码参考

最新推荐文章于 2021-05-31 12:36:19 发布

原创

最新推荐文章于 2021-05-31 12:36:19 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#快速加载页

本文介绍了在前端开发中，如何利用Vue框架和HTML、H5来快速展示加载页面，以提升用户体验。首先说明了创建加载页面的必要性和目标，接着详细解释了加载页面的实现原理，即在Vue初始化之前先显示加载页。提供了加载页的代码示例，适用于手机端和PC端。此外，还展示了Vue加载完毕后隐藏加载页的方法，以及在uniAPP和Vue中具体的实现方式。最后，呈现了加载页在H5和PC端的效果。

前言

我们在做前端开发时，用户的网络情况以及服务器的网络负载是有限度的，因此为了有更好的用户体验，我们需要尽可能的早显示出等待界面，当然有进度条更好。

目标

用户访问Html页面时，用最快的速度先返回加载页，然后当所有的js、css等框架资源加载完毕后在显示主内容

实现原理

我们基于vue框架开发时，有个html模板页，我们将所有的加载页需要的js、div、css放在html中，并且在vue还未完成初始化前，先显示加载页。
由于html页面本身的大小非常小，占用的带宽很小，相比巨大的js文件，我们便可以更快的显示加载页

加载页代码(理论上手机端和PC端显示友好)

将下面的代码直接放在html的<div id="app"></div>之上,下面的代码无任何依赖

<style>
			.init-loading-home {
    
    
                background-color: #303133;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            .init-loading-main {
    
    
                user-select: none;
                width: 100%;
                flex-grow: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
            .init-loading-title {
    
    
                color: #FFF;
                font-size: 14px;
                margin-bottom: 10px;
            }
            .init-loading-sub-title {
    
    
                color: #ABABAB;
                font-size: 12px;
            }
            .init-loading-footer {
    
    
                width: 100%;
                flex-grow: 0;
                text-align: center