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. verilog HDL-并行语句之assign
			
    线网型数据对象: 是verilog hdl常用数据对象之一,起到电路节点之间的互联作用,类似于电路板上的导线. wire是verilog hdl默认的线网型数据对象. 线网型数据对象的读操作在代码任何 ...
    
			
    2. 
						
  2. SQL Server使用证书最小粒度授权
			
    最近在项目中某个功能遇到了阻塞造成的Time out错误.所以需要在执行该功能的时候开启一个线程检测SQL Server中阻塞会话.但是程序本身使用的sql帐号本身不具备VIEW Sever Stat ...
    
			
    3. 
						
  3. [转]kaldi中的在线识别----Online Recognizers
			
    转自: http://blog.csdn.net/wbgxx333/article/details/24932533 本文是kaldi学习联盟中@冒顿翻译的,下面是@冒顿的翻译结果,在这里感谢@冒顿的 ...
    
			
    4. 
						
  4. web API简介(三)：客户端储存之Web Storage API
			
    概述 前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. W ...
    
			
    5. 
						
  5. Typescript 学习笔记二：数据类型
			
    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
    
			
    6. 
						
  6. python中ones的含义和用法
			
    ones是numpy的一个内置函数,作用是生成参数为一的数组.英文解释: Return a new array of given shape and type, filled with ones. 例 ...
    
			
    7. 
						
  7. 机器学习基石笔记：10 Logistic Regression
			
    线性分类中的是非题------>概率题, 设置概率阈值后,大于等于该值的为O,小于改值的为X.------>逻辑回归. O为1,X为0: 逻辑回归假设: 逻辑函数/S型函数:光滑,单调,  ...
    
			
    8. 
						
  8. webpack通过postcss-loader添加浏览器前缀
			
    在webpack中,我们可以很方便的使用autoprefixer来为css3属性添加不同的浏览器前缀. 首先,需要安装autoprefixer不用多说了,其次是安装postcss-loader(npm ...
    
			
    9. 
						
  9. live-server 快速搭建服务
			
    原因: 在2018年3月2日偶然情况下听到一个大佬提起“live-server”这东西, 我就研究一下,用过的人才知道live-server多么方便... 功能: 当启动live-server服务的文 ...
    
			
    10. 
						
  10. Mac-让 Finder 显示隐藏文件和文件夹
			
    打开「终端」,输入以下内容,然后「Return」键,这样就把隐藏的文件和文件夹显示了: defaults write com.apple.finder AppleShowAllFiles -boole ...
    
			
    11.