编程 Javascript

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防止白屏添加首屏动画的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

hold

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js用Date对象的setDate()函数对日期进行加减操作

Sep 18 Javascript

详解AngularJS中的表格使用

Jun 16 Javascript

jQuery右下角旋转环状菜单特效代码

Aug 10 Javascript

Highcharts学习之坐标轴

Aug 02 Javascript

在一个页面重复使用一个js函数的方法详解

Dec 26 Javascript

Vue Transition实现类原生组件跳转过渡动画的示例

Aug 19 Javascript

Angular弹出模态框的两种方式

Oct 19 Javascript

vuejs中监听窗口关闭和窗口刷新事件的方法

Sep 21 Javascript

详解ES6 Fetch API HTTP请求实用指南

Nov 14 Javascript

js构造函数constructor和原型prototype原理与用法实例分析

Mar 02 Javascript

javascript设计模式 ? 观察者模式原理与用法实例分析

Apr 22 Javascript

如何用JavaScript实现一个数组惰性求值库

May 05 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