Blazor WebAssembly启动时的预加载方案定制需求

Blazor WASM首次启动时会下载必要资源，耗时可能较长，你可以按以下步骤替换默认的预加载页面，用自定义的静态HTML内容快速展示给用户：

• 打开项目wwwroot目录下的index.html文件，这是应用的入口页面。
• 移除或替换默认加载提示：
  默认的加载区块大概是这样的：

  <div id="loading">Loading...</div>
  <div id="blazor-error-ui">
      An unhandled error has occurred.
      <a href="" class="reload">Reload</a>
      <a class="dismiss">🗙</a>
  </div>
  

  把加载相关的内容换成你自己的静态HTML，比如带动画的加载提示：

  <div id="custom-loading" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f5f5f5;">
      <img src="your-logo.png" alt="加载中" style="width: 120px; margin-bottom: 16px;" />
      <p style="font-size: 16px; color: #333;">正在准备应用，请稍候</p>
      <!-- 旋转加载动画 -->
      <div style="width: 40px; height: 40px; border: 3px solid #e0e0e0; border-top-color: #0078d4; border-radius: 50%; animation: spin 1.2s linear infinite;"></div>
      <style>
          @keyframes spin {
              from { transform: rotate(0deg); }
              to { transform: rotate(360deg); }
          }
      </style>
  </div>
  

• 修改Blazor初始化逻辑，确保应用加载完成后隐藏自定义加载内容：
  找到页面底部的<script src="_framework/blazor.webassembly.js"></script>，替换成以下代码：

  <script>
      // 页面加载完成后初始化Blazor
      document.addEventListener('DOMContentLoaded', () => {
          Blazor.start().then(() => {
              // 应用启动成功，隐藏自定义加载界面
              document.getElementById('custom-loading').style.display = 'none';
          });
      });
  </script>
  <script src="_framework/blazor.webassembly.js"></script>
  

• 可选优化：把自定义加载用的图片、样式直接内联到index.html里，避免额外网络请求，让初始页面加载更快。

内容的提问来源于stack exchange，提问作者SolarOsQuiere