页面加载完成之前的全屏 loading 图片出现的时机

目录

1,问题表现

一般打开网页时,如果资源较多会有白屏的情况,除了在项目上做首屏优化之外,同时也可以增加一个全屏 loading 图片,等资源加载完成后隐藏。

现在有2个问题

  1. loading 图片应该放在哪里?
  2. loading 图片什么时候隐藏?

2,解决

对 Vue 项目来说,可以在应用实例挂载到容器元素之后,隐藏 loading 图片。

所以一种解决方式是:loading 图片放到 App.vue 中,并在 onMouted 中隐藏即可。

执行顺序: onMouted > DOMContentLoaded 事件 > load 事件

最优的做法

因为 Vue 项目挂载应用实例时,是替换了 div#app 元素的内容。所以可在 index.html 中直接设置,最终会被替换。

html 复制代码
<div id="app">
  <style>
    .loading-img {
      position: fixed;
      width: 200px;
      height: 200px;
      left: 50%;
      top: 50%;
      margin-left: -100px;
      margin-top: -100px;
    }
  </style>
  <img class="loading-img" src="./img/loading.gif" />
</div>

以上。

相关推荐
笨笨鸟慢慢飞1 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu3 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu3 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu4 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge6 分钟前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端
LuckySusu7 分钟前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
BestStarLi12 分钟前
个人写码感悟:TailwindCSS不要忽视子选择器
前端
_大学牲13 分钟前
Flutter 之魂 GetX🔥(三)深入掌握依赖管理
前端·flutter
今天头发还在吗20 分钟前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
渣哥28 分钟前
从 AOP 到代理:Spring 事务注解是如何生效的?
前端·javascript·面试