修复浏览器刷新时有黑影闪过

This commit is contained in:
eoao
2025-08-22 19:03:53 +08:00
parent 6b88e45743
commit 00a08d35e4
2 changed files with 51 additions and 49 deletions
+26 -25
View File
@@ -8,31 +8,6 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
</head> </head>
<body>
<div id="loading-first">
<div class="loading-icon">
<svg class="circular" viewBox="0 0 20 20">
<g class="loading-path">
<circle r="3.375" class="dot1" rx="0" ry="0"/>
<circle r="3.375" class="dot2" rx="0" ry="0"/>
<circle r="3.375" class="dot4" rx="0" ry="0"/>
<circle r="3.375" class="dot3" rx="0" ry="0"/>
</g>
</svg>
</div>
</div>
<div id="app"></div>
<script>
const uiStoreStr = localStorage.getItem('ui')
if (uiStoreStr) {
const uiStore = JSON.parse(uiStoreStr)
const doc = document.querySelector('#loading-first')
doc.style.background = uiStore.dark ? '#141414' : '#FFFFFF'
}
</script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<style> <style>
#loading-first { #loading-first {
@@ -58,6 +33,7 @@
height: 30px; height: 30px;
width: 30px; width: 30px;
animation: loading-rotate 1s linear infinite; animation: loading-rotate 1s linear infinite;
fill: transparent !important;
} }
.loading-path .dot1 { .loading-path .dot1 {
@@ -103,3 +79,28 @@
} }
} }
</style> </style>
<body>
<div id="loading-first">
<div class="loading-icon">
<svg class="circular" viewBox="0 0 20 20">
<g class="loading-path">
<circle r="3.375" class="dot1" rx="0" ry="0"/>
<circle r="3.375" class="dot2" rx="0" ry="0"/>
<circle r="3.375" class="dot4" rx="0" ry="0"/>
<circle r="3.375" class="dot3" rx="0" ry="0"/>
</g>
</svg>
</div>
</div>
<div id="app"></div>
<script>
const uiStoreStr = localStorage.getItem('ui')
if (uiStoreStr) {
const uiStore = JSON.parse(uiStoreStr)
const doc = document.querySelector('#loading-first')
doc.style.background = uiStore.dark ? '#141414' : '#FFFFFF'
}
</script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
+25 -24
View File
@@ -10,30 +10,6 @@
<script type="module" crossorigin src="/assets/index-BWO6kBue.js"></script> <script type="module" crossorigin src="/assets/index-BWO6kBue.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-IV79mZ40.css"> <link rel="stylesheet" crossorigin href="/assets/index-IV79mZ40.css">
</head> </head>
<body>
<div id="loading-first">
<div class="loading-icon">
<svg class="circular" viewBox="0 0 20 20">
<g class="loading-path">
<circle r="3.375" class="dot1" rx="0" ry="0"/>
<circle r="3.375" class="dot2" rx="0" ry="0"/>
<circle r="3.375" class="dot4" rx="0" ry="0"/>
<circle r="3.375" class="dot3" rx="0" ry="0"/>
</g>
</svg>
</div>
</div>
<div id="app"></div>
<script>
const uiStoreStr = localStorage.getItem('ui')
if (uiStoreStr) {
const uiStore = JSON.parse(uiStoreStr)
const doc = document.querySelector('#loading-first')
doc.style.background = uiStore.dark ? '#141414' : '#FFFFFF'
}
</script>
</body>
<style> <style>
#loading-first { #loading-first {
@@ -59,6 +35,7 @@
height: 30px; height: 30px;
width: 30px; width: 30px;
animation: loading-rotate 1s linear infinite; animation: loading-rotate 1s linear infinite;
fill: transparent !important;
} }
.loading-path .dot1 { .loading-path .dot1 {
@@ -104,3 +81,27 @@
} }
} }
</style> </style>
<body>
<div id="loading-first">
<div class="loading-icon">
<svg class="circular" viewBox="0 0 20 20">
<g class="loading-path">
<circle r="3.375" class="dot1" rx="0" ry="0"/>
<circle r="3.375" class="dot2" rx="0" ry="0"/>
<circle r="3.375" class="dot4" rx="0" ry="0"/>
<circle r="3.375" class="dot3" rx="0" ry="0"/>
</g>
</svg>
</div>
</div>
<div id="app"></div>
<script>
const uiStoreStr = localStorage.getItem('ui')
if (uiStoreStr) {
const uiStore = JSON.parse(uiStoreStr)
const doc = document.querySelector('#loading-first')
doc.style.background = uiStore.dark ? '#141414' : '#FFFFFF'
}
</script>
</body>