Merge pull request #55 from jianjianai/dev

优化页面加载速度
jianjianai · May 23, 2023 · d90a2e3 · d90a2e3
2 parents 5c07b6c + b4a98fe
commit d90a2e3
Show file tree

Hide file tree

Showing 10 changed files with 252 additions and 17 deletions.
diff --git a/src/main/resources/web/DrawImg.html b/src/main/resources/web/DrawImg.html
@@ -8,6 +8,20 @@
   <script src="./js/other/stats.js" async="async"></script>
 </head>
 <body>
+<!--加载动画-->
+<div id="load">
+  <div class="mesh-loader">
+    <div class="set-one">
+      <div class="circle"></div>
+      <div class="circle"></div>
+    </div>
+    <div class="set-two">
+      <div class="circle"></div>
+      <div class="circle"></div>
+    </div>
+  </div>
+</div>
+
 <div id="background" class="b"></div>
 <div id="head">
   <div id='head-img-div'>

diff --git a/src/main/resources/web/Write.html b/src/main/resources/web/Write.html
@@ -17,6 +17,20 @@
 </head>
 
 <body>
+<!--加载动画-->
+<div id="load">
+    <div class="mesh-loader">
+        <div class="set-one">
+            <div class="circle"></div>
+            <div class="circle"></div>
+        </div>
+        <div class="set-two">
+            <div class="circle"></div>
+            <div class="circle"></div>
+        </div>
+    </div>
+</div>
+
 <div id="background" class="b"></div>
 <div id="head">
     <div id='head-img-div'>

diff --git a/src/main/resources/web/css/DrawImg.css b/src/main/resources/web/css/DrawImg.css
@@ -58,6 +58,105 @@ body {
     color: #ff8300;
 }
 
+/*加载动画*/
+#load{
+    position: fixed;
+    z-index: 9999;
+    height: 100vh;
+    width: 100vw;
+    background: #ebf6ff;
+    opacity: 1;
+    transition: opacity 0.5s;
+}
+#load.loaded{
+    opacity: 0;
+}
+#load .mesh-loader {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+#load .mesh-loader .circle {
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    background: #03A9F4;
+    border-radius: 50%;
+    margin: -12.5px;
+    -webkit-animation: mesh 3s ease-in-out infinite;
+    animation: mesh 3s ease-in-out infinite -1.5s;
+}
+
+#load .mesh-loader > div .circle:last-child {
+    -webkit-animation-delay: 0s;
+    animation-delay: 0s;
+}
+
+#load .mesh-loader > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+}
+
+#load .mesh-loader > div:last-child {
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+@-webkit-keyframes mesh {
+    0% {
+        -webkit-transform-origin: 50% -100%;
+        transform-origin: 50% -100%;
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+    50% {
+        -webkit-transform-origin: 50% -100%;
+        transform-origin: 50% -100%;
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+    50.00001% {
+        -webkit-transform-origin: 50% 200%;
+        transform-origin: 50% 200%;
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform-origin: 50% 200%;
+        transform-origin: 50% 200%;
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+@keyframes mesh {
+    0% {
+        -webkit-transform-origin: 50% -100%;
+        transform-origin: 50% -100%;
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+    50% {
+        -webkit-transform-origin: 50% -100%;
+        transform-origin: 50% -100%;
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+    50.00001% {
+        -webkit-transform-origin: 50% 200%;
+        transform-origin: 50% 200%;
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform-origin: 50% 200%;
+        transform-origin: 50% 200%;
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
 /* 背景*/
 
 #background {

diff --git a/src/main/resources/web/css/Wtite.css b/src/main/resources/web/css/Wtite.css
@@ -72,6 +72,104 @@ div.markdown-body {
     color: #ff8300;
 }
 
+/*加载动画*/
+#load{
+    position: fixed;
+    z-index: 9999;
+    height: 100vh;
+    width: 100vw;
+    background: #ebf6ff;
+    opacity: 1;
+    transition: opacity 0.5s;
+}
+#load.loaded{
+    opacity: 0;
+}
+#load .mesh-loader {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+#load .mesh-loader .circle {
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    background: #03A9F4;
+    border-radius: 50%;
+    margin: -12.5px;
+    -webkit-animation: mesh 3s ease-in-out infinite;
+    animation: mesh 3s ease-in-out infinite -1.5s;
+}
+
+#load .mesh-loader > div .circle:last-child {
+    -webkit-animation-delay: 0s;
+    animation-delay: 0s;
+}
+
+#load .mesh-loader > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+}
+
+#load .mesh-loader > div:last-child {
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+@-webkit-keyframes mesh {
+    0% {
+        -webkit-transform-origin: 50% -100%;
+        transform-origin: 50% -100%;
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+    50% {
+        -webkit-transform-origin: 50% -100%;
+        transform-origin: 50% -100%;
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+    50.00001% {
+        -webkit-transform-origin: 50% 200%;
+        transform-origin: 50% 200%;
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform-origin: 50% 200%;
+        transform-origin: 50% 200%;
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+@keyframes mesh {
+    0% {
+        -webkit-transform-origin: 50% -100%;
+        transform-origin: 50% -100%;
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+    50% {
+        -webkit-transform-origin: 50% -100%;
+        transform-origin: 50% -100%;
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+    50.00001% {
+        -webkit-transform-origin: 50% 200%;
+        transform-origin: 50% 200%;
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform-origin: 50% 200%;
+        transform-origin: 50% 200%;
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
 
 /* 背景*/
 

diff --git a/src/main/resources/web/css/bing.css b/src/main/resources/web/css/bing.css
@@ -109,7 +109,7 @@ div.markdown-body {
 
 /*加载动画*/
 #load{
-    position: absolute;
+    position: fixed;
     z-index: 9999;
     height: 100vh;
     width: 100vw;

diff --git a/src/main/resources/web/js/DrawImg.js b/src/main/resources/web/js/DrawImg.js
@@ -1,4 +1,5 @@
 import generateImages from "./module/generateImages.js";
+import {LoadAnimation} from "./module/aToos/AToos.js";
 
 
 window.addEventListener('load',()=>{
@@ -50,4 +51,7 @@ window.addEventListener('load',()=>{
         isDrawing = false;
         startDraw.innerText = '开始作图';
     }
+
+
+    LoadAnimation.loaded(document.getElementById('load'));
 })
diff --git a/src/main/resources/web/js/NewBingGoGo.js b/src/main/resources/web/js/NewBingGoGo.js
@@ -10,6 +10,7 @@ import ChatRecordWorker from "./module/ChatRecord/ChatRecordWorker.js";
 import ChatFirstMessages from "./module/BingChat/ChatFirstMessages.js";
 import ChatOptionsSets from "./module/BingChat/ChatOptionsSets.js";
 import nBGGFetch from "./module/nBGGFetch.js";
+import {LoadAnimation} from "./module/aToos/AToos.js";
 
 /**
  * 给bingChat加载服务器配置
@@ -55,19 +56,6 @@ function domLoadServerConfig(h1,h2,p,serverConfig){
     hasShow(p,serverConfig['p']);
 }
 
-/**
- * 页面加载完成
- * @param loaded {HTMLElement}
- */
-function loaded(loaded){
-     if (loaded){
-         loaded.classList.add('loaded');
-         setTimeout(()=>{
-             loaded.remove()
-         },500)
-     }
-}
-
 //页面加载完成之后执行
 window.addEventListener('load',async ()=>{
     //窗口更新滚动
@@ -361,7 +349,8 @@ window.addEventListener('load',async ()=>{
     reSetStartChatMessage().then();
     input_update_input_text_sstyle_show_update();
     cueWordManager.loadcueWorld().then();
-    loaded(document.getElementById('load'));
+
+    LoadAnimation.loaded(document.getElementById('load'));
 });
 
 

diff --git a/src/main/resources/web/js/Wtite.js b/src/main/resources/web/js/Wtite.js
@@ -3,6 +3,7 @@ import TitleWorker from './module/TitleWorker.js'
 import BingChat from './module/BingChat/BingChat.js';
 import ChatFirstMessages from "./module/BingChat/ChatFirstMessages.js";
 import ChatOptionsSets_Write from "./module/BingChat/ChatOptionsSets_Write.js";
+import {LoadAnimation} from "./module/aToos/AToos.js";
 
 /*控制按钮组选择，当选中新的按钮时回调函数*/
 function selectButtonFunRetrun(buttonGroup, returnFun) {
@@ -180,6 +181,7 @@ window.addEventListener('load',()=>{
 
 
     reSetStartChatMessage().then();
+    LoadAnimation.loaded(document.getElementById('load'));
 });
 
 

diff --git a/src/main/resources/web/js/module/ChatRecord/ChatRecord.js b/src/main/resources/web/js/module/ChatRecord/ChatRecord.js
@@ -1,4 +1,4 @@
-import DateFormat from "../aToos/DateFormat.js";
+import {DateFormat} from "../aToos/AToos.js";
 
 /**
  * 一个聊天记录类

diff --git a/...sources/web/js/module/aToos/DateFormat.js → ...in/resources/web/js/module/aToos/AToos.js b/...sources/web/js/module/aToos/DateFormat.js → ...in/resources/web/js/module/aToos/AToos.js
@@ -1,7 +1,7 @@
 /**
  * 时间格式化的工具类
  * */
-export default class DateFormat{
+export class DateFormat{
     /**
      * 将时间格式化
      * @param date 要格式化的时间
@@ -16,4 +16,19 @@ export default class DateFormat{
         let seconds = date.getSeconds();
         return year + "-" + month + "-" + day + " " + hours + "-" + minutes + "-" + seconds;
     }
+}
+
+export class LoadAnimation{
+    /**
+     * 页面加载完成
+     * @param loaded {HTMLElement}
+     */
+    static loaded(loaded){
+        if (loaded){
+            loaded.classList.add('loaded');
+            setTimeout(()=>{
+                loaded.remove()
+            },500)
+        }
+    }
 }