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弹出层示例可自定义
May 19 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
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数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
koa源码中promise的解读
2018/11/13 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
了解JavaScript表单操作和表单域
2019/05/27 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
如何对python的字典进行排序
2020/06/19 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
北大自主招生自荐信
2013/10/19 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
元旦活动感言
2014/03/08 职场文书
毕业留言寄语大全
2014/04/10 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
社区结对共建协议书
2016/03/23 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL
HttpClient实现文件上传功能
2022/08/14 Java/Android
Java Redisson多策略注解限流
2022/09/23 Java/Android