如何在集成Blazor-WASM的MVC应用中实现初始化加载界面

这个实现没有额外门槛，和原生Blazor WASM的加载逻辑完全兼容，不用装第三方组件，按下面步骤配就行：

• 第一步：调整Blazor启动脚本的引用配置
  找到你MVC项目里存放Blazor组件引用的视图（一般是共享布局页，或者对应嵌入Blazor组件的业务视图），把原来直接引用blazor.webassembly.js的代码替换成下面的结构，记得给脚本加上autostart="false"属性，关闭自动启动方便我们控制加载流程：

  <!-- Blazor加载占位节点 -->
  <div id="blazor-loading-mask">
      <div class="blazor-loading-text">Loading...</div>
  </div>
  <script src="_framework/blazor.webassembly.js" autostart="false"></script>
  

  如果你要的是页面角落的小提示，就把blazor-loading-text的内容放成提示文本就行；如果要全屏加载动画，直接在这个容器里放你写好的加载动效DOM就可以。

• 第二步：写加载提示的样式
  按自己的需求写CSS就行，给两个常用的参考：

  /* 右下角小提示样式 */
  .blazor-loading-text {
      position: fixed;
      right: 16px;
      bottom: 16px;
      padding: 6px 12px;
      background: #f5f5f5;
      border-radius: 4px;
      font-size: 14px;
      z-index: 9999;
  }
  
  /* 全屏遮罩加载样式（需要的话替换上面的样式即可）
  #blazor-loading-mask {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      z-index: 10000;
  }
  */
  

• 第三步：加手动启动逻辑，加载完成自动移除提示
  在刚才的脚本引用后面加一段JS代码，手动触发Blazor启动，等初始化完成、组件挂载好之后，直接把加载占位的节点删掉就行，还可以顺便加加载失败的兜底提示：

  <script>
      Blazor.start()
          .then(() => {
              // 启动完成移除加载提示
              const loadingNode = document.getElementById('blazor-loading-mask');
              loadingNode?.remove();
          })
          .catch(err => {
              // 加载失败展示错误提示
              const tipNode = document.querySelector('.blazor-loading-text');
              if (tipNode) tipNode.textContent = '组件加载失败，请刷新重试';
              console.error('Blazor启动错误:', err);
          });
  </script>
  

注意点 #

• 之所以要手动控制启动，是因为默认自动启动模式下，Blazor会直接替换挂载点内的内容，在MVC混合场景下容易误删MVC本身渲染的页面元素，手动启动后精准移除加载节点不会影响其他内容。
• 如果你是在单个MVC页面局部嵌入Blazor组件，不用把加载节点放全局，直接放在对应Blazor组件的挂载点旁边就可以，样式也可以调整成和组件区域匹配的大小。
• 加载提示的内容没有限制，放骨架屏、进度条、品牌动画都可以，只要放在blazor-loading-mask容器内部，启动完成后整个容器会被直接移除，不会残留冗余DOM。

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