Vue防止白屏添加首屏动画的实例


Posted in Javascript onOctober 31, 2019

单页应用有个无法避免的问题就是首屏加载慢,虽然可以通过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>

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

Vue防止白屏添加首屏动画的实例

<!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" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1112431_q8oa3yvrwbh.css" rel="external nofollow" >
 <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>

以上这篇Vue防止白屏添加首屏动画的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue弹出框组件封装实例代码
Oct 31 #Javascript
使用zrender.js绘制体温单效果
Oct 31 #Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 #Javascript
selenium+java中用js来完成日期的修改
Oct 31 #Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 #Javascript
vue项目出现页面空白的解决方案
Oct 31 #Javascript
vue项目引入ts步骤(小结)
Oct 31 #Javascript
You might like
深入理解PHP中的Session和Cookie
2013/06/21 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
php单链表实现代码分享
2016/07/04 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
SVG描边动画
2017/02/23 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Django中的Signal代码详解
2018/02/05 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
感恩母亲节演讲稿
2014/05/07 职场文书
公司年夜饭通知
2015/04/25 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
小学数学教学随笔
2015/08/14 职场文书
工程移交协议书
2016/03/24 职场文书
员工升职自我评价
2019/03/26 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
python 中yaml文件用法大全
2021/07/04 Python
详解SQL的窗口函数
2022/04/21 Oracle