Question

我正在尝试为我的项目制作加载屏幕。我需要javascript从（页面）删除CSS属性“显示：无”我无法弄清楚为什么我的代码不起作用。

问题是：

window.onload不是一个函数，我应该使用类似的东西 “window.onload = loader;”代替。之后我应该将其设为“显示：内联”

工作完美！

window.onload(loader)

function loader(){
    document.getElementById("page").style.removeProperty("display");
}

#page{
    display: none;
}


/* Loading */
#loading{
    width: 100%;
    height:100vh;
    background-color: #428BCA;
}

.loading_container{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#spin {
border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loading h1{
    color: #FFF;
    margin-left:10px; 
}

<div id="page">

Content!

</div>
<div id="loading">
  <div class="loading_container">
  <div id="spin"></div>
  <h1>Loading...</h1>
</div>
</div>

Answer 1

window.onload不是函数。

您需要按如下方式将其分配给该功能。

window.onload = loader;

我假设您希望加载动画在成功加载后消失。 loader（）函数中的代码段通过等待3秒来模拟加载。

我以不同方式设置css属性。您将#page初始化为display: none，因此我只需将其设置为默认值inline。

document.getElementById("page").style.display = "inline";

我倾向于使用此方法，而不是完全删除属性并将其设置为默认值。这样，您可以指定所需的特定显示值。即内联块，块等。

＆＃13;

window.onload = loader;

function loader(){
    setTimeout(function() {
        document.getElementById("loading").style.visibility = "hidden";
        document.getElementById("page").style.display = "inline";
    }, 3000);
}

＆＃13;

#page{
    display: none;
}


/* Loading */
#loading{
    width: 100%;
    height:100vh;
    background-color: #428BCA;
}

.loading_container{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#spin {
border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loading h1{
    color: #FFF;
    margin-left:10px; 
}

＆＃13;

<div id="page">

Content!

</div>
<div id="loading">
  <div class="loading_container">
  <div id="spin"></div>
  <h1>Loading...</h1>
</div>
</div>

＆＃13;

Answer 2

如果我理解正确，你想用“加载器”功能显示页面内容，对吗？如果是这样，你不能试图摆脱display属性，因为它需要设置。您想将其从none更改为initial或inline。

Answer 3

首先，window.onload不是一个功能。这是一个财产。您只需将回调分配给它即可。 removeProperty("display");也是错误的。它应该是style.display = "none"

＆＃13;

window.onload = loader;

function loader() {
  document.getElementById("page").style.display = "none";
}

loader();

＆＃13;

#page {
  display: none;
}


/* Loading */

#loading {
  width: 100%;
  height: 100vh;
  background-color: #428BCA;
}

.loading_container {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

#spin {
  border: 16px solid #f3f3f3;
  /* Light grey */
  border-top: 16px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#loading h1 {
  color: #FFF;
  margin-left: 10px;
}

＆＃13;

<div id="page">

    Content!

  </div>
  <div id="loading">
    <div class="loading_container">
      <div id="spin"></div>
      <h1>Loading...</h1>
    </div>
  </div>

＆＃13;

Javascript加载屏幕 - window.onload无法正常工作

3 个答案: