如何在 html 页面加载器上显示白色背景，而不是页面内容？

Question

我想在加载器页面上显示白色背景。 我尝试使用背景：#ffffff 和背景颜色：#ffffff 但它不起作用，并且它显示仍然页面内容。

这是我的代码：

window.onload =
function(){
    document.getElementById("loading")
    .style.display ="none"
}

.loader{
    border: 1px  solid #ffffff;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #db3535;
    border-right: 1px solid #db3535;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 999;
}
.loader-a{
    border: 1px  solid #ffffff;
    border-top: 1px solid #db3535;
    border-bottom: 1px solid #db3535;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -60px;
    z-index: 999;

}
.will{
    color: #000000;
    font-size: 5px;
    position: fixed;
    text-align: center;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 999;

    
}
@keyframes spin{
    0% {transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

<div id="loading">
  <div class="loader"></div>
  <div class="loader-a"></div>
  <div class="will">
    <h1">Loading...</h1>
  </div>
</div>

有什么解决办法吗？

装载机一切正常。但我不希望它在加载页面内容时显示页面内容。

Answer 1

您必须使 div (

#loading

) 绝对位置并将

0

设置为所有边，例如顶部、右侧、底部、左侧。

将此行代码添加到现有代码中。

#loading {
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

希望能成功

Answer 2

我为您创建了一个蓝色背景的新代码。在你的 css 代码顶部添加这个 CSS

#loading {
    position: absolute;
    background: #1117cf;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
}

在代码中添加 1 秒间隔以查看加载情况：

window.onload = function () {
    setTimeout(() => {
        document.getElementById("loading")
            .style.display = "none"
    }, 1000)
}