map_akashic_v4/index.html at main · kongying-tavern/map_akashic_v4 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>%VITE_APP_TITLE%</title>
    <link rel="stylesheet" href="./src/styles/index.css" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  </head>
  <body class="grid">
    <!-- 首屏 loading -->
    <div id="loading-container" class="fixed-page">
      <div id="loading"></div>
    </div>

    <!-- 应用容器 -->
    <div id="app" class="fixed-page hidden"></div>

    <!-- 初始化 JS -->
    <script type="module">
      const app = document.getElementById('app')
      const loadingContainer = document.getElementById('loading-container')
      loadingContainer.addEventListener(
        'transitionend',
        () => {
          loadingContainer.remove()
        },
        { once: true },
      )
      const firstLoading = document.getElementById('loading')
      const firstLoadingAnimation = new Promise((resolve) => {
        firstLoading.addEventListener('animationend', resolve, { once: true })
      })
      Promise.all([
        import('./src/main.ts').then(() => {
          // 如果加载时间小于 1s，则强制动画时长为 1s
          firstLoading.style.animationDuration = '1s'
        }),
        // 至少等待 loading 动画播放完毕后才进入应用
        firstLoadingAnimation,
      ]).then(() => {
        loadingContainer.classList.toggle('exit', true)
        app.classList.remove('hidden')
      })
    </script>
  </body>
</html>