1.在Index.html里面加入loading的元素，让loading元素显示，让app元素隐藏
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Demo</title>

    <link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">

    <link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">

    <style media="screen" type="text/css">

       #appLoading { width: 100%; height: 100%; }

       #appLoading span {

            position: absolute;

            display: block;

            font-size: 50px;

            line-height: 50px;

            top: 50%;

            left: 50%;

            width: 200px;

            height: 100px;

            -webkit-transform: translateY(-50%)  translateX(-50%);

            transform: translateY(-50%)  translateX(-50%);

        }

    </style>

  </head>

  <body>

    <div id="appLoading">

       <span>Loading...</span>

    </div>

    <div id="app" style="display: none">

       <app></app>

    </div>

    <!-- built files will be auto injected -->

  </body>

</html>


2.在App.vue中加入： 加载完成之后，让loading隐藏，让app元素显示




 mounted(){

        document.getElementById('app').style.display = 'block';

        document.getElementById('appLoading').style.display = 'none';

 }




3. 原理


在文档开始加载的时候显示loading


在js加载完毕后，显示app


												


											
vue项目未加载完成前显示loading...的更多相关文章
	

    
								
  1. 在页面未加载完之前显示loading动画
		
    在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html&g ...
    
		
    2. 
						
  2. javascript图片加载完成前显示loading图片
		
    <html> <title>图片预加载</title> <body> <script> //判断浏览器 var Browser=new Ob ...
    
		
    3. 
						
  3. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
		
    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
    
		
    4. 
						
  4. css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失
		
    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...
    
		
    5. 
						
  5. 在Vue项目中加载krpano全景图
		
    在Vue-cli项目中做krpano全景图编辑器的时候,由于js插件的路径是动态的,做的过程中遇到了加载不到资源的难题,在网上搜索了好久也没找到合适的办法,最后想到了可能是JS加载的问题,于是解决了问 ...
    
		
    6. 
						
  6. vue项目首次加载过慢
		
    vue项目优化 浅谈 Vue 项目优化 关于vue在app首次加载缓慢的解决办法 nginx开启缓存 在http部分加入 #要想开启nginx的缓存功能,需要添加此处的两行内容! #设置Web缓存区名 ...
    
		
    7. 
						
  7. vue-router中，require代替import解决vue项目首页加载时间过久的问题
		
    vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加 ...
    
		
    8. 
						
  8. vue-router路由懒加载（解决vue项目首次加载慢）
		
    懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...
    
		
    9. 
						
  9. 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.
		
    一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. redis之一初识redis
			
    本文主要围绕以下几点进行阐述: 1.什么是redis? 2.为什么要使用redis呢? 3.redis的一些基本配置 4.redis的缺点? 正文: 1.什么是redis? Redis是一款内存高速缓 ...
    
			
    2. 
						
  2. React Native学习方法论
			
    这是我技术公众号的第一篇文章,也是React Native系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学 ...
    
			
    3. 
						
  3. Oracle 的分页查询 SQL 语句
			
    Oracle的分页查询语句基本上可以按照本文给出的格式来进行套用. 分页查询格式: SELECT * FROM (SELECT A.*, ROWNUM RN FROM (SELECT * FROM T ...
    
			
    4. 
						
  4. 开源性能测试工具Locust使用篇（三）
			
    脚本增强 面对较复杂的测试场景,我们可能还是会感觉无从下手:例如,很多时候脚本需要做关联或参数化处理,Locust中就不知道怎么实现了.可能也是这方面的原因,感觉难以将Locust应用到实际的性能测试 ...
    
			
    5. 
						
  5. 上下文无关的GMM-HMM声学模型
			
    一.语音识别基本介绍 (一)统计语音识别的基本等式 X------声学特征向量序列,观测值 W------单词序列 W*------给定观测值下,概率最大的单词序列 应用贝叶斯理论等价于 进而得出统计 ...
    
			
    6. 
						
  6. JavaScript 交换数组元素位置的几种方式
			
    前言 交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式. 第三方变量 最基础的方式,创建一个变量作为中转. let temp = array[index1]; array[index1 ...
    
			
    7. 
						
  7. rocketmq自启动配置
			
    捣鼓rocketmq自启动半天发现是启动脚本里没有声明java环境 现记录下 脚本 #!/bin/bash export JAVA_HOME=/opt/data/jdk1.8/jdk1.8.0_161 ...
    
			
    8. 
						
  8. Spring Cloud的注册中心和服务者,消费者的构建
			
    Spring Cloud的注册中心和服务者,消费者的构建 注册中心Eureka: 新建项目stu-eureka: StuEurekaApplication: package com.demo.stue ...
    
			
    9. 
						
  9. Android开源系列：仿网易Tab分类排序控件实现
			
    前言 产品:网易新闻那个Tab排序好帅. 开发:哦~ 然后这个东东在几天后就出现了..... (PS:差不多一年没回来写博客了~~~~(>_<)~~~~,顺便把名字从 enjoy风铃 修改 ...
    
			
    10. 
						
  10. C# 元数据描述
			
    元数据概述:元数据是一种二进制信息,用以对存储在公共语言运行库可移植可执行文件 (PE) 文件或存储在内存中的程序进行描述.将您的代码编译为 PE 文件时,便会将元数据插入到该文件的一部分中,而将代码 ...
    
			
    11.