Blazor Server中DOMContentLoaded在JS文件不生效问题求助

问题根源 #

使用ServerPrerendered渲染模式时，页面会经历两次渲染：

1. 首次生成静态HTML并触发DOMContentLoaded，此时预加载器会被移除；
2. Blazor建立SignalR连接后，会重新渲染完整的交互式DOM，这一步不会再次触发DOMContentLoaded，导致预加载器被重新渲染后无法被移除。

解决方法 #

方法1：通过Blazor组件的OnAfterRenderAsync触发移除（推荐）

在全局布局组件（比如MainLayout.razor）中，利用Blazor的生命周期方法确保交互式渲染完成后执行移除逻辑：

@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 仅在首次交互式渲染完成后执行
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("removePreloader");
        }
    }
}

同时修改main.js，把移除逻辑封装为独立函数，并保留静态渲染时的触发：

function removePreloader() {
    const preloader = document.querySelector('.preloader');
    if (preloader) {
        preloader.remove();
        // 也可以用添加隐藏类的方式：preloader.classList.add('hidden');
    }
}

// 处理静态渲染阶段的移除
document.addEventListener('DOMContentLoaded', removePreloader);

方法2：监听Blazor的全局事件

直接在main.js中监听Blazor的启动和渲染事件，确保两次渲染后都执行移除：

function removePreloader() {
    const preloader = document.querySelector('.preloader');
    if (preloader) {
        preloader.remove();
    }
}

// 处理静态渲染
document.addEventListener('DOMContentLoaded', removePreloader);

// Blazor启动完成后再次执行
Blazor.start().then(removePreloader);

// 或者监听Blazor全局渲染完成事件
document.addEventListener('blazorrendered', removePreloader);

方法3：CSS结合状态控制

给预加载器添加CSS类控制显示，通过JS在合适时机切换状态：

1. 在_Host.cshtml中定义预加载器：

<div class="preloader" id="preloader">加载中...</div>

2. 添加CSS样式：

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.preloader.hidden {
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

3. 用方法1或2的逻辑，将removePreloader函数改为添加hidden类：

function removePreloader() {
    const preloader = document.querySelector('.preloader');
    if (preloader) {
        preloader.classList.add('hidden');
    }
}

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