Эх сурвалжийг харах

程序启动时,先加载预制图片缓解加载焦虑,再加载css和js等

Michael Wang 6 жил өмнө
parent
commit
072319f184

+ 23 - 0
public/index.html

@@ -17,7 +17,30 @@
     </script>
   </head>
 
+  <style>
+    #app-placeholder {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    .app-placeholder-img {
+      background-image: url(/img/bg.4c1d802d.jpg);
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      width: 100vw;
+      min-height: 600px;
+    }
+  </style>
+
   <body>
+    <div id="app-placeholder">
+      <div style="height: 120px; font-size: 40px; text-align: center">
+        程序加载中...
+      </div>
+      <div class="app-placeholder-img"></div>
+    </div>
+
     <script>
       if (false && location.host.includes("ecs.qmth.com.cn")) {
         (async function() {

+ 3 - 0
src/features/Login/Login.vue

@@ -146,6 +146,9 @@ export default {
   async mounted() {
     await this.checkNewVersion();
   },
+  beforeCreate() {
+    document.getElementById("app-placeholder").remove();
+  },
   async created() {
     if (this.LOGIN_ID_DOMAINS.includes(this.schoolDomain)) {
       this.loginType = "STUDENT_IDENTITY_NUMBER";