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. postgresql vacuum操作
			
    postgresql vacuum操作 PostgreSQL数据库管理工作中,定期vacuum是一个重要的工作.vacuum的效果: 1.1释放,再利用 更新/删除的行所占据的磁盘空间. 1.2更新P ...
    
			
    2. 
						
  2. Visual Studio中xml文件使用app.config、web.config等的智能提示的方法
			
    在.Net开发的过程中,有时我们需要使用Xml文件作为配置文件(基于某些情况的考虑),而不是app.config.web.config这种,但是我们在xml中配置时希望可以增加类似编辑app.conf ...
    
			
    3. 
						
  3. WPF 开机注册自启动及设置确保以管理员运行
			
    最近用到开机自启动设置,在此记录下设置自启动的步骤,如果对各位有需要可以借阅,之前设置管理权限解释在创建解决方案是将VS以管理员方式打开,这种方法可以实现,但是个人还是偏向与本文的方式,不多说啥了,下 ...
    
			
    4. 
						
  4. “全栈2019”Java多线程第三十七章：如何让等待的线程无法被中断
			
    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
    
			
    5. 
						
  5. 读入挂(IO)
			
    快如闪电,清华杜瑜皓的读入挂,一模一样代码,加了这个之后... 细思极恐,and 整整行!!! namespace IO{ #define BUF_SIZE 100000 #define OUT_SI ...
    
			
    6. 
						
  6. MongoDB学习小结
			
    启动对应server:cd:到mangodb安装根目录下 mongod --dbpath db路径 创建MangoDB服务: mongod.exe --logpath d:/mongodb/logs/ ...
    
			
    7. 
						
  7. 简单的异步函数async/await例子
			
    function resolveAfter2Seconds(x){ return new Promise(resolve => { setTimeout(() => { resolve(x ...
    
			
    8. 
						
  8. 理解Docker
			
    Docker Image OS分为 内核(kernel) 和 用户 空间,kernel 启动后,会挂载root文件系统提供用户空间. Docker Image 就相当于一个 root文件系统.是一个特 ...
    
			
    9. 
						
  9. 排序算法系列：选择排序算法JAVA版（靠谱、清晰、真实、可用、不罗嗦版）
			
    在网上搜索算法的博客,发现一个比较悲剧的现象非常普遍: 原理讲不清,混乱 啰嗦 图和文对不上 不可用,甚至代码还出错 我总结一个清晰不罗嗦版: 原理: 从数组头元素索引i开始,寻找后面最小的值(比i位 ...
    
			
    10. 
						
  10. Java程序员如何运用所掌握的技术构建一个完整的业务架构
			
    1.通用架构概述 创业之初,我们往往会为了快速迭代出产品,而选择最简单的技术架构,比如LAMP架构,SSH三层架构.这些架构可以适应初期业务的快速发展,但是,随着业务变得越来越复杂,我们会发现这些架构 ...
    
			
    11.