Question

我想要一个隐藏所有页面元素（加载微调器除外）的vanilla JS代码，直到完全加载页面，然后删除或隐藏加载微调器元素。一旦页面加载，我的代码在隐藏微调器方面做得很好，但我无法完成其他部分。它看起来像这样：

＆＃13;

function hideloader() {
  document.getElementById("loading").style.display="none";
}

＆＃13;

<html>
  <head>
    <title>My Title</title>
    <link href="main.css" rel="stylesheet" type="text/css"/>
    <script src="script.js"></script>
  </head>
  <body onload="hideloader()">
    <div id="loading">
      <!--All loading spinner design goes here-->
      Loading...
    </div>
    <header>
      <!--Header stuff-->
      <h1>My Title</h1>
    </header>
    <p>
      <!--Main content-->
      My content
     </p>
    <footer>
      <!--footer stuff-->
      Footer stuff
     </footer>
  </body>
</html>

＆＃13;

＆＃13; 提前谢谢！

Answer 1

一般来说，最好不要这样做，而是设计页面，以便渐进式加载在等待页面的其余部分时为用户提供一些内容。

但这样做非常简单：只需将您的主要内容放在一个元素（例如，div）中，该元素上有一个类（例如hidden），然后删除该类想表明：

CSS：

.hidden {
    display: none;
}

JavaScript，当您准备好展示它时：

document.getElementById("content").classList.remove("hidden");

（所有现代浏览器都支持classList;如果您需要支持旧浏览器，则可以对其进行填充，或者要删除所有类，只需执行.className = ""。）

另一种方法是在加载时向body添加一个类，然后在加载期间显示/隐藏各种元素的类，使用这样的CSS：

body:not(loaded) .hide-for-load {
  display: none;
}
body.loaded .hide-after-load {
  display: none;
}

然后隐藏.hide-for-load元素，直到您添加该类，并在添加clas时隐藏.hide-after-load元素。

从您的网页派生的实例：

＆＃13;

setTimeout(function() {
  document.body.classList.add("loaded");
}, 1000);

＆＃13;

body:not(.loaded) .hide-for-load {
  display: none;
}
body.loaded .hide-after-load {
  display: none;
}

＆＃13;

<div id="loading" class="hide-after-load">
  Loading<!--All loading spinner design goes here-->
</div>
<header class="hide-for-load">
  <!--Header stuff-->
  <h1>My Title</h1>
</header>
<p class="hide-for-load">
  <!--Main content-->
  My content
</p>
<footer class="hide-for-load">
  <!--footer stuff-->
  Footer stuff
</footer>

＆＃13;

隐藏元素，直到页面完全加载

1 个答案: