vue 项目在加载完成之前，显示预置加载动画

自己有一个日记项目，由于服务器带宽很小1MB，在加载之前页面中显示是空白的，就想给它加个前置的动画，这个用户体验更好。

一、实现

1. 定义项目入口

如果你是 pwa 应用， vue3 默认都已经是 pwa 应用，就需要在 vue.config.js 的 pwa 字段中确保 pwa.manifestOptions.start_url 是 index.html。
比如我的配置如下

  /*** PWA 设置*/pwa: {name: '日记', // 名字themeColor: "#373737", // 背景颜色appleMobileWebAppCapable: true, // 苹果 WebApp 支持// manifest 设置manifestOptions: {name: '标题日记',short_name: "日记",theme_color: "#373737",start_url: "./index.html",display: "standalone",background_color: "#373737",icons: [{src: "logo.svg",sizes: "512x512",type: "image/svg+xml",purpose: "any",},{src: "appicon-apple.png",sizes: "512x512",type: "image/png",purpose: "any",},],}}

2. 在 index.html 添加需要展示的预置动画

这里看个人发挥了，就是把需要展示的放到 index.html 中即可，放到 id="app" 的 div 之外。
比如我的是

<!--加载动画--><link rel="stylesheet" href="preloading.css"><view class="preloading"><view class="logo-preloading"><img src="logo.svg" alt="LOGO"></view><view class="preloading-title">载入中</view><div class="loading"><div class="loading-1 loading-item"></div><div class="loading-2 loading-item"></div><div class="loading-3 loading-item"></div></div>
</view><div id="app"></div>

这样在项目还没有加载完成之前就能显示这个 .preloading 内的内容了

3. 项目加载完成后，隐藏掉之前的预置动画内容

这个简单，只需要在 app.vue 的 created 或 mounted 方法中隐藏这个东西即可

app.vue

created() {// 日记项目载入后，隐藏 preloadingdocument.querySelector('.preloading').style.display = 'none'
},

二、最终效果

三、开源项目

可以从我的这个开源项目中查看源代码：
https://github.com/KyleBing/diary

vue 项目在加载完成之前，显示预置加载动画相关推荐

解决vue项目在ie浏览器中无法显示的问题，兼容低版本浏览器问题
解决vue项目在ie浏览器中无法显示的问题,兼容低版本浏览器问题 1.在csdn中找到了一下解决方案,但与本项目略有不同 vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空 ...
在vue项目中使用gsap，实现极佳的2d动画效果
在vue项目中使用gsap,实现极佳的2d动画效果一.GSAP是什么? 二.使用步骤 1.引入库 2.在vue中使用 3.vue组件使用gsap完整代码总结一.GSAP是什么? GSAP全称是G ...
WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵（一）
Pixi中文网:Pixi.js中文网使用vue-cli初始化一个vue项目我就不多说了,在我的这边文章里已经写过: 从零开始vue项目使用cesium开发三维地图(一)_yinzisang的博客-C ...
vue项目无法在IE浏览器中显示
网上找了很多资料,都说是babel-polyfill包的问题,按照他们的方法,我发现无法解决,之于这些坑,总结了我的解决方法. 拿到一个vue项目首先要安装对应的插件, npm install 安装过 ...
VUE项目中如何实现表格数据的懒加载
vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页处理如果不想分页 ...
解决vue项目打包后woff、tff资源路径加载错误
错误路径解决方法: 重新打包
android webview 加载图片一直显示正在加载中
今天无意间发现自己的项目WebView加载时,没有调用到onPageFinished,部分图片一直显示加载中,找了老久不知道出现什么问题~~~ 无奈之下拿出老版本测试,发现加载很正常,只好把代码拿出来 ...
arcengine 加载地图不显示_ArcEngine加载地图
对于ArcEngine开发者来说,万事第一步,就是要先加载地图数据,不过我们下面要讲的加载地图的方法不是用ArcEngine自带的控件或命令来实现的,而是以代码方式实现的.加载地图的方式主要分为两种: ...
vue项目中表格删除数据页码显示注意点
在做管理系统的过程中,想必大家都接触过表格的增删改查吧,最近我在项目中发现,对于表格删除和批量删除时,有个细节项目组的前端开发并没有注意到,显然也没有去处理,测试人员居然也没去测试这个场景. 当我们表 ...

vue 项目在加载完成之前，显示预置加载动画

vue 项目在加载完成之前，显示预置加载动画

一、实现

1. 定义项目入口

2. 在 index.html 添加需要展示的预置动画

3. 项目加载完成后，隐藏掉之前的预置动画内容

二、最终效果

三、开源项目

vue 项目在加载完成之前，显示预置加载动画相关推荐

最新文章

热门文章