如何让HTML页面加载器显示白色背景并隐藏页面内容

问题核心是你的#loading容器没有设置全屏覆盖的样式，无法遮挡页面内容。按以下步骤修改即可：

1. 给#loading添加全屏覆盖样式 #

在CSS中新增#loading的样式，让它铺满整个视口并显示白色背景：

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 9999; /* 层级高于页面其他元素，确保完全覆盖 */
}

• position: fixed：让容器固定在视口，不会随页面滚动移动
• width: 100vw + height: 100vh：铺满整个屏幕的宽度和高度
• background-color: #ffffff：设置白色背景，彻底遮挡页面内容
• z-index: 9999：确保加载容器的层级比页面其他元素更高，避免被穿透

2. 修复HTML语法错误 #

你的HTML代码中h1标签多了一个引号，修正后：

<div class="will">
  <h1>Loading...</h1>
</div>

3. 验证页面内容层级 #

如果页面中其他元素设置了较高的z-index，请确保#loading的z-index值比它们更大，防止加载器被页面内容覆盖。

修改完成后，页面加载时#loading会全屏显示白色背景和加载动画，直到window.onload触发后隐藏，页面内容就不会提前显示了。

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