系统初始化加载动画逻辑以及隐藏

需求:进入系统默认有如下的加载界面,但是由于网页内嵌到了其他网页中,这种环境下进入时再加载就不合适,需要隐藏掉。
因此本文的内容逻辑为


在这里插入图片描述

研究加载逻辑

1.定位了一下,这部分的加载逻辑是写在 public/index.html文件中的 <div id="app"></div>
在这里插入图片描述
2.有点眼熟的id名字,在App.vue 中 <router-view />的父元素的id也是app
在这里插入图片描述
3.这就很神奇了,页面的加载逻辑是先加载loading,再进入页面,也就是渲染<router-view /> 。所以有可能是在进入界面时加载被覆盖了。
4.查看了一下进入界面后的dom层,加载的dom已经不见了。那就很有可能是在进入时直接被替换掉了。
在这里插入图片描述
5.在官网中没翻到,在一篇文章中找到了这俩段话
在这里插入图片描述
在这里插入图片描述
6.大抵可以理解,本系统的加载逻辑就是

  • 初始化的时候加载在index.html中的loading动画
  • 然后main.js将资源加载好后,把App.vue中的内容渲染(覆盖)到index.html 指定 id元素

解决需求:在被内嵌时隐藏掉loading

  1. 判断当前是否内嵌环境
 if (window.parent != window){
	//被内嵌中
  }
  1. 操作dom层,隐藏盒子
  document.getElementById('loader-wrapper').style.visibility = 'hidden'
  或者
  document.getElementById('loader-wrapper').style.display = 'none'
ps: visibility 隐藏占位, display隐藏不占位
  1. 放置位置:放在<body></body>最后面
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title>管理系统</title>
      <style>
      </style>
    </head>
    <body>
    <div id='app'></div>
    <script>放在这里</script>
    </body>
    </html>
    
  2. 完整解法:
    //public/index.html
    <body>
      <noscript>
        <strong>请先启动服务</strong>
      </noscript>
      <div id="app">
        <div id="loader-wrapper">
          <div id="loader"></div>
          <div class="loader-section section-left"></div>
          <div class="loader-section section-right"></div>
          <div class="load_title">正在加载资源,请耐心等待
          </div>
        </div>
      </div>
      <script>
        console.log('内嵌网页', window.parent != window)
        if (window.parent != window) {
          document.getElementById('loader-wrapper').style.visibility = 'hidden'
        }
      </script>
    </body>
    

好久没时间更了
最近才有些空闲时间看技术,写业务逻辑久了有点生了
虽然是一个小小的需求,但是对vue的工程化项目是怎么个跑法的有了第一次清晰的理解

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值