页面加载时显示Loading GIF，加载完成后主内容无法显示求助

我需要实现网页加载时显示Loading GIF，页面完全加载后隐藏Loading并显示主内容，用JavaScript实现后遇到Loading消失但主内容不显示的问题，相关代码如下：

相关代码 #

landingpage.js #

window.addEventListener("load", function () {
    var loading = document.getElementById("loading");
    loading.style.display = "none";

    var mainContent = document.querySelector(".l-main");
    mainContent.style.display = "block"; // 这行似乎不起作用
});

landingPage.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head content -->
</head>
<body>
    <div id="loading">
        <!-- Loading GIF content -->
    </div>
    <main class="l-main">
        <!-- Main content -->
    </main>
    <script src="landingpage.js"></script>
</body>
</html>

初始隐藏样式 #

/* Styles for the loading screen */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hide the main content initially */
.l-main {
    display: none;
}
.l-header{
    display: none;
}

问题排查与解决办法 #

可能的原因 #

1. CSS优先级冲突：如果.l-main有其他外部样式或更具体的选择器设置了display: none，行内样式display: block的优先级不够，会被覆盖。
2. 元素选择错误：页面中可能不存在class="l-main"的元素，或者类名拼写有误（比如大小写、多写/漏写字符）。
3. 额外元素未处理：你还隐藏了.l-header，但JS里只处理了.l-main，如果页面内容依赖.l-header显示，也会导致视觉上主内容没出来。

修复方案 #

方案1：用类切换替代直接修改样式（推荐）

这种方式更易维护，也能避免优先级问题：

• 先在CSS里新增一个显示类：

.show {
    display: block !important;
}

• 修改JavaScript代码，给需要显示的元素添加类：

window.addEventListener("load", function () {
    // 隐藏Loading
    document.getElementById("loading").style.display = "none";
    // 显示主内容
    document.querySelector(".l-main").classList.add("show");
    // 同时显示header（如果需要）
    const header = document.querySelector(".l-header");
    if (header) header.classList.add("show");
});

方案2：强制提升行内样式优先级

如果不想改类，直接给行内样式加!important，强制覆盖其他规则：

mainContent.style.display = "block !important";

方案3：检查样式冲突

打开浏览器开发者工具（F12），选中.l-main元素，查看Styles面板，看是否有其他CSS规则划掉了你的display: block，针对性调整选择器的优先级（比如用body main.l-main这种更具体的选择器来设置显示样式）。

额外优化

把样式代码放在<head>标签内，确保页面加载时立即应用隐藏规则，避免出现无样式内容闪烁（FOUC）。

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