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. web安全基础
			
    web安全备忘 主机系统安全防护:防火墙控制 Web是一个分布式系统,一个站点多个主机布置,一主机布置多个站点:并发,异步,同步 主机安全配置文件修改与强化 web站点数据验证逻辑的常用技巧:功能性代 ...
    
			
    2. 
						
  2. IPC_管道
			
    1.管道特点: 1)单向数据通信 2)匿名管道-常用于(父子进程/有血缘关系的进程之间) 3)命名管道-常用于(无血缘关系进程之间通信) 4)提供一种流式服务(发送和接受不接受字节数的大小,可取任意大 ...
    
			
    3. 
						
  3. Git入门基础详情教程
			
    前言 写了一篇文章<一篇文章了解Github和Git教程>还觉得不错,继续写了<为了Github默默付出,我想了解你>,那么继续写Git 基础知识. Git 官网:https: ...
    
			
    4. 
						
  4. JS 　实现九宫格算法
			
    九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位 公式: 行 row=parseInt(i/cols ...
    
			
    5. 
						
  5. 5月份值得一看的 Java 技术干货！
			
    5月又即将要离我们远去了,这个月有小长假51劳动节,有54青年节,有513母亲节,更有坑爹的520神马节?!! 废话不说,又到了总结上个月干货的时候了,这个月我们带来了各种Java技术干货,都是不得不 ...
    
			
    6. 
						
  6. Spark基础脚本入门实践1
			
    1.创建数据框架 Creating DataFrames val df = spark.read.json("file:///usr/local/spark/examples/src/mai ...
    
			
    7. 
						
  7. 高手速成android开源项目【View篇】
			
    主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.ProgressBar及其他如Dialo ...
    
			
    8. 
						
  8. dart之旅（三）- list
			
    list, 在 js 中被称为数组, 但是和 js 中的数组还是有不少不同的地方,我们来看一个例子: // 声明一个长度不可变的 list List<int> fixedLengthLis ...
    
			
    9. 
						
  9. 利用channel在goroutins之间控制同步和传递数据
			
    在java等代码中,我们查询数据库的操作: sql = "select * from ...."; result = db.query(sql) for(item in resul ...
    
			
    10. 
						
  10. 前端错误监控，sentry入门配置详细教程
			
    一.前言 最近经理说要把公司项目结合sentry用起来,然后组长不想做,老员工也不想做,分配任务就这么分配给我了,很荣幸接锅,摸索了几天,了解了一些基本配置,深一点的玩法可能还得实践一段时间,这里对于 ...
    
			
    11.