如何在Blazor WebAssembly预渲染加载时正确显示图片与加载动画？

问题分析 #

• 纯WebAssembly渲染模式下，内置加载动画可正常显示并在加载完成后自动消失，但预渲染模式下动画会持续停留在页面内容上方。
• 非预渲染路径使用纯WebAssembly模式时，会出现数秒白屏；手动添加的加载div在Blazor加载完成后无法自动移除，导致元素残留页面。

解决方案 #

方案1：通过JavaScript在Blazor初始化完成后移除加载元素 #

给手动添加的加载div设置唯一ID，在Blazor初始化完成后用JS移除该元素：

1. 修改服务器端页面（如_Host.cshtml）的代码：

<div id="app">
    @if (HttpContext.Request.Path.StartsWithSegments("/Welcome") || HttpContext.Request.Path.StartsWithSegments("/About-Us"))
    {
        <component type="typeof(Web.Client.App)"
                   render-mode="WebAssemblyPrerendered" />
    }
    else
    {
        <div id="manual-loading-spinner" style="position:fixed;top:5px;left:5px;">
            <img src="/images/Logo.png" style="height:60px;" alt="Logo" />
            <svg class="loading-progress">
                <circle r="40%" cx="50%" cy="50%" />
                <circle r="40%" cx="50%" cy="50%" />
            </svg>
            <div class="loading-progress-text"></div>
        </div>
        <component type="typeof(Web.Client.App)"
                   render-mode="WebAssembly" />
    }
</div>

2. 在wwwroot/index.html中添加初始化完成的监听脚本：

<script src="_framework/blazor.webassembly.js"></script>
<script>
    window.addEventListener('blazorinitialized', function () {
        const spinner = document.getElementById('manual-loading-spinner');
        if (spinner) spinner.remove();
    });
</script>

方案2：将加载动画整合到Blazor客户端组件中 #

把加载逻辑移到客户端App.razor，通过组件状态控制动画显示：

1. 修改App.razor：

@if (isLoading)
{
    <div style="position:fixed;top:5px;left:5px;">
        <img src="/images/Logo.png" style="height:60px;" alt="Logo" />
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>
}
else
{
    <Router AppAssembly="@typeof(App).Assembly">
        <!-- 原有路由内容 -->
    </Router>
}

@code {
    private bool isLoading = true;

    protected override async Task OnInitializedAsync()
    {
        // 等待初始化完成，可根据实际业务调整延迟或逻辑
        await Task.Delay(100);
        isLoading = false;
    }
}

2. 简化服务器端页面（_Host.cshtml）代码：

<div id="app">
    @if (HttpContext.Request.Path.StartsWithSegments("/Welcome") || HttpContext.Request.Path.StartsWithSegments("/About-Us"))
    {
        <component type="typeof(Web.Client.App)"
                   render-mode="WebAssemblyPrerendered" />
    }
    else
    {
        <component type="typeof(Web.Client.App)"
                   render-mode="WebAssembly" />
    }
</div>

方案3：优化内置加载动画的显示逻辑 #

修改wwwroot/index.html中的内置加载模板，针对预渲染路径隐藏动画：

<!-- 找到内置加载动画的容器（示例为id="loading"的div），添加以下脚本 -->
<script>
    const isPrerenderPath = window.location.pathname.startsWith('/Welcome') || window.location.pathname.startsWith('/About-Us');
    if (isPrerenderPath) {
        document.getElementById('loading').style.display = 'none';
    }
</script>

非预渲染路径正常显示内置动画，Blazor加载完成后内置动画会自动消失。

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