Vue防止白屏添加首屏动画

单页应用有个无法避免的问题就是首屏加载慢，虽然可以通过gzip、路由懒加载、CDN、提高服务器带宽等手段，首屏加载速度仍然比传统多页应用慢一些。

为了提高用户体验，首屏添加loading动画很有必要，并且实现特别简单。

vue-cli3生成的项目中，打开index.html会发现如下代码

<body><noscript><strong>We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected -->
复制代码

我们只需要在这个div中插入loading代码即可,vue初始化完成后会自动替换

<div id="app">此处插入loading代码</div>
复制代码

以下是我实现的一种动画效果，可自行替换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta http-equiv="X-UA-Compatible" content="chrome=1"/><link rel="icon" href="<%= BASE_URL %>favicon.ico"><link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1112431_q8oa3yvrwbh.css"><title>demo</title><style>.spinner {margin: 100px auto;width: 50px;height: 60px;text-align: center;font-size: 10px;}.spinner > div {background-color: #FE3C71;height: 100%;width: 6px;display: inline-block;-webkit-animation: stretchDelay 1.2s infinite ease-in-out;animation: stretchDelay 1.2s infinite ease-in-out;}.spinner .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}.spinner .rect3 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}.spinner .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}.spinner .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}@-webkit-keyframes stretchDelay {0%, 40%, 100% {-webkit-transform: scaleY(0.4)}20% {-webkit-transform: scaleY(1.0)}}@keyframes stretchDelay {0%, 40%, 100% {transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}20% {transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}</style>
</head>
<body>
<noscript><strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"><div class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>
</div>
<!-- built files will be auto injected -->
</body>
</html>
复制代码

转载于:https://juejin.im/post/5cbd75a1e51d456e79545c86

Vue防止白屏添加首屏动画相关推荐

前端性能指标：白屏和首屏时间的计算
作者:Hanpeng_Chen 公众号:前端极客技术文章首发个人博客:前端性能指标:白屏和首屏时间的计算|代码视界前言页面性能优化是前端开发中一个重要的环节,而评判前端性能的优劣有两个比较经常听 ...
前端白屏问题_前端优化-如何计算白屏和首屏时间
白屏时间白屏时间指的是浏览器开始显示内容的时间.因此我们只需要知道是浏览器开始显示内容的时间点,即页面白屏结束时间点即可获取到页面的白屏时间. 计算白屏时间因此,我们通常认为浏览器开始渲染标签或 ...
白屏、首屏的定义、影响因素、优化方法
定义 1.白屏时间(First Paint):是指浏览器从响应用户输入网址地址,到浏览器开始显示内容的时间. 白屏时间 = 页面开始展示的时间点 - 开始请求的时间点 =window.performa ...
vue+ssr+koa实现，首屏快速展示以及seo优化
文章目录一.问题二.SSR是什么?(服务器端渲染) 二.搭建步骤 1.创建普通vue2项目 2.下载相关依赖包 3.代码改造 1.改造src/main.js 2.增加src/client.js 3 ...
Vue 单页应用的首屏优化
对于单页应用,要在一个页面上为用户提供产品的所有功能,在这个页面加载的时候,首先要加载大量的静态资源,这个加载时间相对比较长.所以我们需要做一些相应的优化,减少响应时间,尽快把首屏显示出来. 1.压缩 ...
Vue首屏加载白屏问题及解决方案
Vue首屏加载白屏问题及解决方案首先说一下首页加载为什么会白屏? 先说下 SPA 单页面的加载过程首先就是 html ,也就是 FP 阶段 FP(全称"First Paint" ...
Vue首屏加载等待动画
vue实现首屏加载等待动画避免首次加载白屏尴尬的俩种实现方式 1.第一种效果代码 index.html中添加以下代码 <style type="text/css">. ...
vue首屏性能优化，解决页面加载时间过长（白屏）方法
vuecli做了个spa项目,大概有几十个个路由直接 npm run build打包出来,有一个 1M的巨大 js文件,导致首页白屏时间过长分析工具 vuecli 2.x自带了分析工具,只要运行 ...
Vue首屏性能优化组件
Vue首屏性能优化组件简单实现一个Vue首屏性能优化组件,现代化浏览器提供了很多新接口,在不考虑IE兼容性的情况下,这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情,当然为了考 ...

Vue防止白屏添加首屏动画

Vue防止白屏添加首屏动画相关推荐

最新文章

热门文章