基础JS加载屏幕失效问题求助

核心错误点 #

• JavaScript类名传入错误：classList.add()方法只需要传入纯类名字符串，你错误地在类名前加了.，导致无法正确添加样式类。
• CSS规则未闭合：.Invisible样式的闭合大括号}缺失，浏览器无法正确解析该类的样式规则。

修正后的完整代码 #

HTML（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="test.styles.css">
    <script src="test_script.js"></script>
</head>
<body>
    <section id="LOADER"></section>
</body>
</html>

CSS（补充闭合大括号）

body {
    padding: 0px;
    border: 0px;
    margin: 0px;
}

#LOADER{
    background-color: #051755;
    z-index: 1;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    transition: opacity 3s ease-in-out;
    opacity: 1;
}

.Invisible {
    z-index: -1 !important; 
    opacity: 0 !important;
} /* 补充缺失的闭合大括号 */

JavaScript（移除类名前的点号）

let $Loader = document.querySelector('#LOADER')

window.addEventListener('load', invisibility); 

function invisibility(){
    $Loader.classList.add('Invisible'); // 去掉类名前的.
}

额外优化说明 #

• 给#LOADER添加top: 0; left: 0;，确保加载层完全覆盖视口，避免极端情况下出现空白区域。
• 若需要加载层隐藏后不阻挡页面交互，可在.Invisible类中添加pointer-events: none;。

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