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

Question

I want a vanilla JS code that hides all page elements (except the loading spinner) untill page is fully loaded, and then deletes or hides the loading spinner element. 我想要一个普通的JS代码，可以隐藏所有页面元素（加载微调器除外），直到完全加载页面，然后删除或隐藏加载微调器元素。 My code does a good job at hiding the spinner once the page is loaded, but I couldn't accomplish the other part. 页面加载后，我的代码在隐藏微调框方面做得很好，但是我无法完成另一部分。 It looks like this: 看起来像这样：

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

 <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>

Thank you in advance! 先感谢您！

Answer 1

In general, it's better not to do this, but instead to design the page so that progressive loading provides some content to the user while waiting for the rest of the page. 通常，最好不要这样做，而要设计页面，以便在等待页面的其余部分时逐步加载为用户提供一些内容。

But doing it is quite easy: Just put your main content in an element (say, a div ) that has a class on it (say, hidden ), and remove that class when you want to show it: 但这很容易：只需将主要内容放在上面有类（例如hidden ）的元素（例如div ）中，然后在要显示它时删除该类：

CSS: CSS：

.hidden {
    display: none;
}

JavaScript when you're ready to show it: 准备显示JavaScript时：

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

( classList is supported by all modern browsers; if you need to support old browsers, it can be polyfilled or, to remove all classes, just do .className = "" .) （所有现代浏览器都支持classList ；如果您需要支持旧浏览器，则可以将其填充或删除所有类，只需执行.className = "" 。）

Another approach is to add a class to body when it's loaded, and then classes on the various elements you want to show/hide during load, with CSS like this: 另一种方法是在加载时向body添加一个类，然后在要加载时显示/隐藏的各种元素上添加类，如下所示：

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

Then .hide-for-load elements are hidden until you add the class, and .hide-after-load elements are hidden when you add the clas. 然后，隐藏.hide-for-load元素直到您添加该类，而添加分类时隐藏.hide-after-load元素。

Live Example derived from your page: 从您的页面派生的实时示例：

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

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

 <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>

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-09-03 14:10:07

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-09-03 14:10:07

解决方案1
3 已采纳 2017-09-03 14:10:07