解决项目加载时空白页面

背景:当前端项目加载时,遇到网络不稳定或更新项目时,出现长时间白屏情况,对用户体验非常不友好。

解决方法

  • CSN加速
  • 增加带宽
  • 前端页面修改

本文就第三点展开

index.html页面 (public文件夹下)

html 复制代码
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="<%= BASE_URL %>styles/base.css">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
    <link href="./styles/base.css">
</head>

<body>
<div id="mainLoading">
    <div class="ddr ddr1"></div>
    <div class="ddr ddr2"></div>
    <div class="ddr ddr3"></div>
    <div class="ddr ddr4"></div>
    <div class="ddr ddr5"></div>
</div>
<div id="app" style="display: none"></div>
</body>

base.css

css 复制代码
#mainLoading {
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mainLoading .box {
    display: flex;
    align-items: center;
    justify-content: center;
}

#mainLoading .ddr {
    width: 8px;
    height: 100px;
    float: left;
    margin: 2px;
    background-color: #4890FF;
    animation: loading 1s infinite ease-in-out; /*animation:动画名称 持续时间 动画速度曲线 延迟 执行多少次 是否正反方向轮流播放*/
}

#mainLoading .ddr2 {
    animation-delay: -0.9s; /*定义开始执行的地方,负号表示直接从第900ms开始执行*/
}

#mainLoading .ddr3 {
    animation-delay: -0.8s;
}

#mainLoading .ddr4 {
    animation-delay: -0.7s;
}

#mainLoading .ddr5 {
    animation-delay: -0.6s;
}

@keyframes loading {
    0%,
    40%,
    100% {
        /*定义每帧的动作*/
        -webkit-transform: scaleY(0.5);
    }
    20% {
        -webkit-transform: scaleY(1);
    }
}

App.vue 添加钩子函数

html 复制代码
  mounted() {
    // 关闭loading
    document.getElementById('mainLoading').style.display = 'none';
    document.getElementById('app').style.display = 'block';
  },

效果图 loading动画覆盖白屏。

相关推荐
羊羊小栈38 分钟前
基于「YOLO目标检测 + 多模态AI分析」的PCB缺陷检测分析系统(vue+flask+数据集+模型训练)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
晚星star1 小时前
在 Web 前端实现流式 TTS 播放
前端·vue.js
本末倒置1831 小时前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
不一样的少年_2 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
Zz_waiting.4 小时前
案例开发 - 日程管理 - 第六期
前端·javascript·vue.js·路由·router
A 风4 小时前
封装日期选择器组件,带有上周,下周按钮
开发语言·javascript·vue.js
Simon_He4 小时前
vue-markdown-renderer:比 vercel streamdown 更低 CPU、更多节点支持、真正的流式渲染体验
前端·vue.js·markdown
BillKu5 小时前
npm 安装命令中关于 @ 的讲解,如:npm install @vue-office/docx vue-demi
前端·vue.js·npm
超人不会飛6 小时前
大模型应用 Vue H5 模板:快速落地流式交互与富文本渲染的开箱方案
前端·vue.js·github
奇怪的前端76 小时前
Alien-Signals 响应式系统
前端·vue.js