Skip to content
This repository was archived by the owner on Nov 8, 2023. It is now read-only.

Commit d90a2e3

Browse files
jianjianaijianjianai
authored
Merge pull request #55 from jianjianai/dev
优化页面加载速度
2 parents 5c07b6c + b4a98fe commit d90a2e3

File tree

10 files changed

+252
-17
lines changed

10 files changed

+252
-17
lines changed

‎src/main/resources/web/DrawImg.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,20 @@
88
<script src="./js/other/stats.js" async="async"></script>
99
</head>
1010
<body>
11+
<!--加载动画-->
12+
<div id="load">
13+
<div class="mesh-loader">
14+
<div class="set-one">
15+
<div class="circle"></div>
16+
<div class="circle"></div>
17+
</div>
18+
<div class="set-two">
19+
<div class="circle"></div>
20+
<div class="circle"></div>
21+
</div>
22+
</div>
23+
</div>
24+
1125
<div id="background" class="b"></div>
1226
<div id="head">
1327
<div id='head-img-div'>

‎src/main/resources/web/Write.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,20 @@
1717
</head>
1818

1919
<body>
20+
<!--加载动画-->
21+
<div id="load">
22+
<div class="mesh-loader">
23+
<div class="set-one">
24+
<div class="circle"></div>
25+
<div class="circle"></div>
26+
</div>
27+
<div class="set-two">
28+
<div class="circle"></div>
29+
<div class="circle"></div>
30+
</div>
31+
</div>
32+
</div>
33+
2034
<div id="background" class="b"></div>
2135
<div id="head">
2236
<div id='head-img-div'>

‎src/main/resources/web/css/DrawImg.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,105 @@ body {
5858
color: #ff8300;
5959
}
6060

61+
/*加载动画*/
62+
#load{
63+
position: fixed;
64+
z-index: 9999;
65+
height: 100vh;
66+
width: 100vw;
67+
background: #ebf6ff;
68+
opacity: 1;
69+
transition: opacity 0.5s;
70+
}
71+
#load.loaded{
72+
opacity: 0;
73+
}
74+
#load .mesh-loader {
75+
overflow: hidden;
76+
height: 100%;
77+
width: 100%;
78+
}
79+
80+
#load .mesh-loader .circle {
81+
width: 25px;
82+
height: 25px;
83+
position: absolute;
84+
background: #03A9F4;
85+
border-radius: 50%;
86+
margin: -12.5px;
87+
-webkit-animation: mesh 3s ease-in-out infinite;
88+
animation: mesh 3s ease-in-out infinite -1.5s;
89+
}
90+
91+
#load .mesh-loader > div .circle:last-child {
92+
-webkit-animation-delay: 0s;
93+
animation-delay: 0s;
94+
}
95+
96+
#load .mesh-loader > div {
97+
position: absolute;
98+
top: 50%;
99+
left: 50%;
100+
}
101+
102+
#load .mesh-loader > div:last-child {
103+
-webkit-transform: rotate(90deg);
104+
transform: rotate(90deg);
105+
}
106+
107+
@-webkit-keyframes mesh {
108+
0% {
109+
-webkit-transform-origin: 50% -100%;
110+
transform-origin: 50% -100%;
111+
-webkit-transform: rotate(0);
112+
transform: rotate(0);
113+
}
114+
50% {
115+
-webkit-transform-origin: 50% -100%;
116+
transform-origin: 50% -100%;
117+
-webkit-transform: rotate(360deg);
118+
transform: rotate(360deg);
119+
}
120+
50.00001% {
121+
-webkit-transform-origin: 50% 200%;
122+
transform-origin: 50% 200%;
123+
-webkit-transform: rotate(0deg);
124+
transform: rotate(0deg);
125+
}
126+
100% {
127+
-webkit-transform-origin: 50% 200%;
128+
transform-origin: 50% 200%;
129+
-webkit-transform: rotate(360deg);
130+
transform: rotate(360deg);
131+
}
132+
}
133+
@keyframes mesh {
134+
0% {
135+
-webkit-transform-origin: 50% -100%;
136+
transform-origin: 50% -100%;
137+
-webkit-transform: rotate(0);
138+
transform: rotate(0);
139+
}
140+
50% {
141+
-webkit-transform-origin: 50% -100%;
142+
transform-origin: 50% -100%;
143+
-webkit-transform: rotate(360deg);
144+
transform: rotate(360deg);
145+
}
146+
50.00001% {
147+
-webkit-transform-origin: 50% 200%;
148+
transform-origin: 50% 200%;
149+
-webkit-transform: rotate(0deg);
150+
transform: rotate(0deg);
151+
}
152+
100% {
153+
-webkit-transform-origin: 50% 200%;
154+
transform-origin: 50% 200%;
155+
-webkit-transform: rotate(360deg);
156+
transform: rotate(360deg);
157+
}
158+
}
159+
61160
/* 背景*/
62161

63162
#background {

‎src/main/resources/web/css/Wtite.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,104 @@ div.markdown-body {
7272
color: #ff8300;
7373
}
7474

75+
/*加载动画*/
76+
#load{
77+
position: fixed;
78+
z-index: 9999;
79+
height: 100vh;
80+
width: 100vw;
81+
background: #ebf6ff;
82+
opacity: 1;
83+
transition: opacity 0.5s;
84+
}
85+
#load.loaded{
86+
opacity: 0;
87+
}
88+
#load .mesh-loader {
89+
overflow: hidden;
90+
height: 100%;
91+
width: 100%;
92+
}
93+
94+
#load .mesh-loader .circle {
95+
width: 25px;
96+
height: 25px;
97+
position: absolute;
98+
background: #03A9F4;
99+
border-radius: 50%;
100+
margin: -12.5px;
101+
-webkit-animation: mesh 3s ease-in-out infinite;
102+
animation: mesh 3s ease-in-out infinite -1.5s;
103+
}
104+
105+
#load .mesh-loader > div .circle:last-child {
106+
-webkit-animation-delay: 0s;
107+
animation-delay: 0s;
108+
}
109+
110+
#load .mesh-loader > div {
111+
position: absolute;
112+
top: 50%;
113+
left: 50%;
114+
}
115+
116+
#load .mesh-loader > div:last-child {
117+
-webkit-transform: rotate(90deg);
118+
transform: rotate(90deg);
119+
}
120+
121+
@-webkit-keyframes mesh {
122+
0% {
123+
-webkit-transform-origin: 50% -100%;
124+
transform-origin: 50% -100%;
125+
-webkit-transform: rotate(0);
126+
transform: rotate(0);
127+
}
128+
50% {
129+
-webkit-transform-origin: 50% -100%;
130+
transform-origin: 50% -100%;
131+
-webkit-transform: rotate(360deg);
132+
transform: rotate(360deg);
133+
}
134+
50.00001% {
135+
-webkit-transform-origin: 50% 200%;
136+
transform-origin: 50% 200%;
137+
-webkit-transform: rotate(0deg);
138+
transform: rotate(0deg);
139+
}
140+
100% {
141+
-webkit-transform-origin: 50% 200%;
142+
transform-origin: 50% 200%;
143+
-webkit-transform: rotate(360deg);
144+
transform: rotate(360deg);
145+
}
146+
}
147+
@keyframes mesh {
148+
0% {
149+
-webkit-transform-origin: 50% -100%;
150+
transform-origin: 50% -100%;
151+
-webkit-transform: rotate(0);
152+
transform: rotate(0);
153+
}
154+
50% {
155+
-webkit-transform-origin: 50% -100%;
156+
transform-origin: 50% -100%;
157+
-webkit-transform: rotate(360deg);
158+
transform: rotate(360deg);
159+
}
160+
50.00001% {
161+
-webkit-transform-origin: 50% 200%;
162+
transform-origin: 50% 200%;
163+
-webkit-transform: rotate(0deg);
164+
transform: rotate(0deg);
165+
}
166+
100% {
167+
-webkit-transform-origin: 50% 200%;
168+
transform-origin: 50% 200%;
169+
-webkit-transform: rotate(360deg);
170+
transform: rotate(360deg);
171+
}
172+
}
75173

76174
/* 背景*/
77175

‎src/main/resources/web/css/bing.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ div.markdown-body {
109109

110110
/*加载动画*/
111111
#load{
112-
position: absolute;
112+
position: fixed;
113113
z-index: 9999;
114114
height: 100vh;
115115
width: 100vw;

‎src/main/resources/web/js/DrawImg.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import generateImages from "./module/generateImages.js";
2+
import {LoadAnimation} from "./module/aToos/AToos.js";
23

34

45
window.addEventListener('load',()=>{
@@ -50,4 +51,7 @@ window.addEventListener('load',()=>{
5051
isDrawing = false;
5152
startDraw.innerText = '开始作图';
5253
}
54+
55+
56+
LoadAnimation.loaded(document.getElementById('load'));
5357
})

‎src/main/resources/web/js/NewBingGoGo.js‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import ChatRecordWorker from "./module/ChatRecord/ChatRecordWorker.js";
1010
import ChatFirstMessages from "./module/BingChat/ChatFirstMessages.js";
1111
import ChatOptionsSets from "./module/BingChat/ChatOptionsSets.js";
1212
import nBGGFetch from "./module/nBGGFetch.js";
13+
import {LoadAnimation} from "./module/aToos/AToos.js";
1314

1415
/**
1516
* 给bingChat加载服务器配置
@@ -55,19 +56,6 @@ function domLoadServerConfig(h1,h2,p,serverConfig){
5556
hasShow(p,serverConfig['p']);
5657
}
5758

58-
/**
59-
* 页面加载完成
60-
* @param loaded {HTMLElement}
61-
*/
62-
function loaded(loaded){
63-
if (loaded){
64-
loaded.classList.add('loaded');
65-
setTimeout(()=>{
66-
loaded.remove()
67-
},500)
68-
}
69-
}
70-
7159
//页面加载完成之后执行
7260
window.addEventListener('load',async ()=>{
7361
//窗口更新滚动
@@ -361,7 +349,8 @@ window.addEventListener('load',async ()=>{
361349
reSetStartChatMessage().then();
362350
input_update_input_text_sstyle_show_update();
363351
cueWordManager.loadcueWorld().then();
364-
loaded(document.getElementById('load'));
352+
353+
LoadAnimation.loaded(document.getElementById('load'));
365354
});
366355

367356

‎src/main/resources/web/js/Wtite.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import TitleWorker from './module/TitleWorker.js'
33
import BingChat from './module/BingChat/BingChat.js';
44
import ChatFirstMessages from "./module/BingChat/ChatFirstMessages.js";
55
import ChatOptionsSets_Write from "./module/BingChat/ChatOptionsSets_Write.js";
6+
import {LoadAnimation} from "./module/aToos/AToos.js";
67

78
/*控制按钮组选择，当选中新的按钮时回调函数*/
89
function selectButtonFunRetrun(buttonGroup, returnFun) {
@@ -180,6 +181,7 @@ window.addEventListener('load',()=>{
180181

181182

182183
reSetStartChatMessage().then();
184+
LoadAnimation.loaded(document.getElementById('load'));
183185
});
184186

185187

‎src/main/resources/web/js/module/ChatRecord/ChatRecord.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import DateFormat from "../aToos/DateFormat.js";
1+
import {DateFormat} from "../aToos/AToos.js";
22

33
/**
44
* 一个聊天记录类

‎src/main/resources/web/js/module/aToos/DateFormat.js‎ renamed to ‎src/main/resources/web/js/module/aToos/AToos.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* 时间格式化的工具类
33
* */
4-
export default class DateFormat{
4+
export class DateFormat{
55
/**
66
* 将时间格式化
77
* @param date 要格式化的时间
@@ -16,4 +16,19 @@ export default class DateFormat{
1616
let seconds = date.getSeconds();
1717
return year + "-" + month + "-" + day + " " + hours + "-" + minutes + "-" + seconds;
1818
}
19+
}
20+
21+
export class LoadAnimation{
22+
/**
23+
* 页面加载完成
24+
* @param loaded {HTMLElement}
25+
*/
26+
static loaded(loaded){
27+
if (loaded){
28+
loaded.classList.add('loaded');
29+
setTimeout(()=>{
30+
loaded.remove()
31+
},500)
32+
}
33+
}
1934
}

0 commit comments

Comments
 (0)