当前位置： 首页 > news >正文

关于vue首屏加载loading问题

news 2026/5/17 8:27:02

注意：网上搜索出来的都是教你在index.html里面<div id="app"><div class="loading"></div>或者在app.vue Mounte生命周期函数控制app和loading的显示和隐藏,这里会有一个问题，就是js渲染页面需要时间，一样会出现几秒钟白屏。mounted（包裹使用nextTick）执行回调div app的内容依然没有开始渲染。

正确的做法是给loading一个z-index:-1，绝对定位。当app有内容时覆盖loading，确保app的内容高度至少占一屏，不然会出现覆盖不全。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo测试</title><style>
body{width: 100vw;min-height: 100vh;position: relative;background-color: #ffffff;margin: 0;
}
#app{background-color: #ffffff;
}.loading-model {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;position: absolute;top: 0;z-index: -1;}.loading {width: 100px;height: 100px;border: 10px solid #176af8;border-bottom: #cccccc 10px solid;border-radius: 50%;-webkit-animation: load 1.1s infinite linear;}@-webkit-keyframes load {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}</style>
</head>
<body>
<div id="app">
</div>
<div id="appLoading" class="loading-model"><div class="loading"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

相关文章：

关于vue首屏加载loading问题

注意&#xff1a;网上搜索出来的都是教你在index.html里面<div id"app"><div class"loading"></div>或者在app.vue Mounte生命周期函数控制app和loading的显示和隐藏,这里会有一个问题&#xff0c;就是js渲染页面需要时间&#xff0c;一…...

编程日记 2023/9/6 22:49:36

数据库性能测试实践：慢查询统计分析

01、慢查询 查看是否开启慢查询 mysql> show variables like %slow%’; 如图所示&#xff1a; 系统变量log_slow_admin_statements 表示是否将慢管理语句例如ANALYZE TABLE和ALTER TABLE等记入慢查询日志启用log_slow_extra系统变量 &#xff08;从MySQL 8.0.14开始提供&a…...

编程日记 2023/9/6 22:48:34

windows wsl ssh 配置流程 Permission denied (publickey)

wsl ssh连接失败配置流程 1、wsl2 ifconfig的网络ip是虚拟的ip&#xff0c;所以采用wsl1 2、wsl1的安装教程。 3、openssh-server重装 sudo apt-get update sudo apt-get remove openssh-server sudo apt-get install openssh-server4、修改ssh配置文件 sudo vim /etc/ss…...

编程日记 2023/9/6 22:47:33

OpenCV（五）：图像颜色空间转换

目录 1.图像颜色空间介绍 RGB 颜色空间 2.HSV 颜色空间 3.RGBA 颜色空间 2.图像数据类型间的互相转换convertTo() 3.不同颜色空间互相转换cvtColor() 4.Android JNI demo 1.图像颜色空间介绍 RGB 颜色空间 RGB 颜色空间是最常见的颜色表示方式之一&#xff0c;其中 R、…...

编程日记 2023/9/6 22:46:32

一图胜千言！数据可视化多维讲解（Python）

数据聚合、汇总和可视化是支撑数据分析领域的三大支柱。长久以来&#xff0c;数据可视化都是一个强有力的工具&#xff0c;被业界广泛使用&#xff0c;却受限于 2 维。在本文中&#xff0c;作者将探索一些有效的多维数据可视化策略&#xff08;范围从 1 维到 6 维&#xff09;。…...

编程日记 2023/9/6 22:45:31

Hbase相关总结

Hbase 1、Hbase的数据写入流程 由客户端发起写入数据的请求, 首先会先连接zookeeper 从zookeeper中获取到当前HMaster的信息，并与HMaster建立连接从HMaster中获取RegionServer列表信息 连接meta表对应的RegionServer地址, 从meta表获取当前要写入的表对应region被那个RegionS…...

编程日记 2023/9/6 22:44:30

C++ Primer Plus第二章编程练习答案

答案仅供参考&#xff0c;实际运行效果取决于运行平台和运行软件 1.编写一个C程序&#xff0c;它显示您的姓名和地址。 #include <iostream> using namespace std;int main() {cout << "My name is sakuraaa0908 C Primer Plus." << endl;cout &…...

编程日记 2023/9/6 22:43:28

Web后端开发（请求响应）上

请求响应的概述 浏览器&#xff08;请求&#xff09;<--------------------------(HTTP协议)---------------------->&#xff08;响应&#xff09;Web服务器 请求&#xff1a;获取请求数据 响应&#xff1a;设置响应数据 BS架构&#xff1a;浏览器/服务器架构模式。…...

编程日记 2023/9/6 22:42:27

LeetCode 338. Counting Bits【动态规划,位运算】简单

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

编程日记 2023/9/6 22:41:26

解释 Git 的基本概念和使用方式。

Git 是一种分布式版本控制系统&#xff0c;它可以跟踪文件的修改历史、协调多个人员的工作、将分支合并到一起等。下面是 Git 的一些基本概念和使用方式。 - 仓库&#xff08;Repository&#xff09;&#xff1a;存储代码、版本控制历史记录等的地方。 - 分支&#xff08;Bran…...

编程日记 2023/9/6 22:40:25

计算机网络初识

目录 1、计算机网络背景 网络发展 认识 "协议" 2、网络协议初识 OSI七层模型 TCP/IP五层(或四层)模型 3、网络传输基本流程 网络传输流程图 数据包封装和分用 4、网络中的地址管理 认识IP地址 认识MAC地址 1、计算机网络背景 网络发展 在之前呢&…...

编程日记 2023/9/6 22:39:25

python 笔记（2）——文件、异常、面向对象、装饰器、json

目录 1、文件操作 1-1&#xff09;打开文件的两种方式&#xff1a; 1-2&#xff09;文件操作的简单示例&#xff1a; write方法: read方法&#xff1a; readline方法&#xff1a; readlines方法&#xff1a; 2、异常处理 2-1&#xff09;不会中断程序的异常捕获和处理…...

编程日记 2023/9/6 22:38:23

Meta AI的Nougat能够将数学表达式从PDF文件转换为机器可读文本

大多数科学知识通常以可移植文档格式&#xff08;PDF&#xff09;的形式存储&#xff0c;这也是互联网上第二突出的数据格式。然而&#xff0c;从这种格式中提取信息或将其转换为机器可读的文本具有挑战性&#xff0c;尤其是在涉及数学表达式时。 为了解决这个问题&#xff0c…...

编程日记 2023/9/6 22:37:20

【Python爬虫笔记】爬虫代理IP与访问控制

一、前言 在进行网络爬虫的开发过程中&#xff0c;有许多限制因素阻碍着爬虫程序的正常运行&#xff0c;其中最主要的一点就是反爬虫机制。为了防止爬虫程序在短时间内大量地请求同一个网站&#xff0c;网站管理者会使用一些方式进行限制。这时候&#xff0c;代理IP就是解决方…...

编程日记 2023/9/6 22:36:19

50、Spring WebFlux 的 自动配置 的一些介绍，与 Spring MVC 的一些对比

Spring WebFlux Spring WebFlux 简称 WebFlux &#xff0c;是 spring5.0 新引入的一个框架。 SpringBoot 同样为 WebFlux 提供了自动配置。 Spring WebFlux 和 Spring MVC 是属于竞争关系&#xff0c;都是框架。在一个项目中两个也可以同时存在。 SpringMVC 是基于 Servlet A…...

编程日记 2023/9/6 22:35:18

【算法专题突破】双指针 - 和为s的两个数字（6）

目录 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 1. 题目解析 题目链接&#xff1a;剑指 Offer 57. 和为s的两个数字 - 力扣&#xff08;Leetcode&#xff09; 这道题题目就一句话但是也是有信息可以提取的&#xff0c; 最重要的就是开始的那句话&#…...

编程日记 2023/9/6 22:34:16

Redis7入门概述

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…...

编程日记 2023/9/6 22:33:15

SQL sever命名规范

目录 一、标识符 二、表名&#xff08;Table&#xff09;: 三、字段名&#xff08;fields&#xff09;&#xff1a; 四、约束&#xff08;Constraint&#xff09;&#xff1a; 五、索引&#xff08;Index&#xff09;&#xff1a; 六、存储过程&#xff08;Stored Proced…...

编程日记 2023/9/6 22:32:14

BCSP-玄子Share-Java框基础_工厂模式/代理模式

三、设计模式 3.1 设计模式简介 软件设计中的三十六计是人们在长期的软件开发中的经验总结是对某些特定问题的经过实践检验的特定解决方法被广泛运用在 Java 框架技术中 3.1.1 设计模式的优点 设计模式是可复用的面向对象软件的基础可以更加简单方便地复用成功的设计和体系…...

编程日记 2023/9/6 22:31:12

【数据结构】2015统考真题 6

题目描述 【2015统考真题】求下面的带权图的最小&#xff08;代价&#xff09;生成树时&#xff0c;可能是Kruskal算法第2次选中但不是Prim算法&#xff08;从v4开始&#xff09;第2次选中的边是&#xff08;C&#xff09; A. (V1, V3) B. (V1, V4) C. (V2, V3) D. (V3, V4) …...

编程日记 2023/9/6 22:30:11

Claude API企业准入最后窗口期：2024Q3起强制启用OAuth 2.1+硬件级密钥绑定，现在不升级将无法续签

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Claude API企业准入政策的演进与合规紧迫性 随着Anthropic对Claude模型商用边界的持续收束&#xff0c;企业级API接入正从“技术可用性”转向“治理可验证性”。2024年Q2起&#xff0c;所有新注册企业账…...

编程新知 2026/5/17 7:57:58

激光切割外壳设计全流程：从创客工具到产品级制造的实战指南

1. 项目概述&#xff1a;为什么选择激光切割来做外壳&#xff1f;如果你和我一样&#xff0c;捣鼓过不少电子项目&#xff0c;从简单的Arduino温湿度计到复杂的树莓派家庭服务器&#xff0c;那你一定为“给它们找个家”这件事头疼过。3D打印太慢&#xff0c;开模注塑成本又高得…...

编程新知 2026/5/17 7:42:10

模拟电路布局优化：多智能体强化学习实践

1. 模拟电路布局优化的挑战与机遇在集成电路设计领域&#xff0c;模拟电路布局一直是个令人头疼的问题。作为一名从业十余年的模拟电路设计师&#xff0c;我深刻体会到传统布局方法在面对现代工艺挑战时的局限性。每次手工调整晶体管位置时&#xff0c;那种"差之毫厘&…...

编程新知 2026/5/17 7:01:38

药物发现自动化：FEP计算工作流引擎faah的设计原理与实战

1. 项目概述&#xff1a;一个面向药物发现的自动化工作流引擎 最近在药物研发的自动化工具领域&#xff0c;一个名为 kiron0/faah 的项目引起了我的注意。这并非一个简单的脚本集合&#xff0c;而是一个设计精巧、旨在为药物发现中的自由能微扰计算提供端到端自动化解决方案的…...

编程新知 2026/5/17 6:08:25

EL线创客工作坊：从零到一的电致发光项目实践指南

1. 项目概述&#xff1a;为什么EL线工作坊是创客入门的绝佳选择如果你正在寻找一个能让新手快速上手、成品炫酷、且能完美融合电子与手工的创客项目&#xff0c;EL线工作坊几乎是一个无可挑剔的答案。EL&#xff0c;即电致发光&#xff0c;它不像LED那样依赖一个个分立的光点&a…...

编程新知 2026/5/17 5:37:42

faah：轻量级自动化任务编排器，简化运维与数据处理工作流

1. 项目概述&#xff1a;一个被低估的自动化利器最近在整理自己的自动化工具链时&#xff0c;又翻出了kiron0/faah这个项目。说实话&#xff0c;第一次看到这个仓库名&#xff0c;我也有点懵——“faah”&#xff1f;这名字听起来不像是一个典型的工具。但点进去之后&#xff0…...

编程新知 2026/5/17 5:19:24

GitHub自动化运维：构建模块化Operator集提升开发效率

1. 项目概述&#xff1a;一个为GitHub开发者量身定制的“操作集”如果你是一个重度GitHub用户&#xff0c;无论是维护个人项目、参与开源贡献&#xff0c;还是管理团队仓库&#xff0c;大概率都经历过这样的场景&#xff1a;每天要重复执行一堆琐碎但必要的操作。比如&#xff…...

编程新知 2026/5/17 3:27:42

Mod Engine 2完全指南：告别游戏模组安装烦恼的终极解决方案

Mod Engine 2完全指南&#xff1a;告别游戏模组安装烦恼的终极解决方案 【免费下载链接】ModEngine2 Runtime injection library for modding Souls games. WIP 项目地址: https://gitcode.com/gh_mirrors/mo/ModEngine2 还在为传统游戏模组安装的繁琐流程而烦恼吗&…...

编程新知 2026/5/17 2:35:00

2026 私域救命玩法！90% 的老板赚不到钱，根本不是产品不行

我在杭州做电商、做私域、做投资这么多年&#xff0c;见过各行各业的起起伏伏。这些年接触过的实体老板&#xff0c;没有一百也有八十。手里握着工厂的、拿着自主知识产权的、有正规生产资质的&#xff0c;比比皆是。但 90% 的人都在亏钱。他们天天抱怨流量太贵、同行乱价、客户…...

编程新知 2026/5/17 1:58:57

树莓派GPIO扩展实战：基于MCP23017芯片与Adafruit Bonnet

1. 项目概述&#xff1a;为什么你的树莓派需要GPIO扩展&#xff1f;玩树莓派的朋友&#xff0c;尤其是那些热衷于物联网、智能家居或者自动化项目的&#xff0c;肯定都经历过一个共同的烦恼&#xff1a;GPIO引脚不够用。树莓派引以为傲的40针GPIO排针&#xff0c;在连接了几个传…...

编程新知 2026/5/17 1:22:24