Javascript 在页面加载时隐藏文档正文
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6919236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide document body on page load
提问by aroemen
I have a javascript that is loaded in the document head that needs to hide the document body until all page contents have loaded. I have tried:
我有一个加载在文档头中的 javascript，它需要隐藏文档正文，直到所有页面内容都加载完毕。我试过了：
$(document.body).hide();
But there still appears to be a flicker in some browsers. I am using the latest jQuery library (1.6.2). Firing the event on domready does hide the document body, but causing a flicker as well.
但是在某些浏览器中似乎仍然有闪烁。我正在使用最新的 jQuery 库 (1.6.2)。在 domready 上触发事件会隐藏文档正文，但也会导致闪烁。
All that I can control is what is in the javascript. I cannot manipulate the static html pages as the script is being developed as a plugin.
我所能控制的只是javascript中的内容。由于脚本是作为插件开发的，因此我无法操作静态 html 页面。
回答by RobG
Hiding content until the page is loaded is an anti-usability feature. Some parts of the content may take while to load, meanwhile your visitors see nothing. Browsers render content as it is received because users chose that as the preferred model in the very begining.
在页面加载之前隐藏内容是一种反可用性功能。内容的某些部分可能需要一段时间才能加载，同时您的访问者什么也看不到。浏览器在接收内容时呈现内容，因为用户一开始就选择它作为首选模型。
If you persist with this approach, you must hide the content using script. Otherwise, users with javascript disabled or not available, or where the script fails to execute correctly, will never see the content.
如果您坚持使用这种方法，则必须使用脚本隐藏内容。否则，javascript 禁用或不可用，或者脚本无法正确执行的用户将永远不会看到内容。
The simplest way to hide content using script is to use document.writeto create a style sheet, then remove it to show the content:
使用脚本隐藏内容的最简单方法是使用document.write创建一个样式表，然后将其删除以显示内容：
document.write( '<style class="hideStuff" ' +
'type="text/css">body {display:none;}<\/style>');
window.onload = function() {
setTimeout(
function(){
var s, styles = document.getElementsByTagName('style');
var i = styles.length;
while (i--) {
s = styles[i];
if (s.className == 'hideStuff') {
s.parentNode.removeChild(s);
return;
}
}
}, 1000); // debug pause
}
回答by jfriend00
The best way to do this is to put all content in a container div and have a style sheet that hides it by default. You can then show the content once everything is loaded. There is no way to run Javascript before the default page content renders so the only way to start out hidden is with a statically defined CSS rule:
最好的方法是将所有内容放在一个容器 div 中，并有一个默认隐藏它的样式表。然后，您可以在加载所有内容后显示内容。在默认页面内容呈现之前无法运行 Javascript，因此开始隐藏的唯一方法是使用静态定义的 CSS 规则：
HTML:
HTML：
<body>
<div id="container">
all dynamic page content goes here
</div>
</body>
CSS in a stylesheet with the page to make it initially not visible:
页面样式表中的 CSS 使其最初不可见：
#container {display: none;}
And, then you can do whatever you want with javascript and when you're done building the page, you do this to make it visible:
然后，您可以使用 javascript 做任何您想做的事情，当您完成页面构建时，您可以这样做以使其可见：
document.getElementById("container").style.display = "block";
or in jQuery:
或在 jQuery 中：
$("#container").show();
回答by EasyToUse
You can use CSS and JS:
您可以使用 CSS 和 JS：
In the top of your document, below the TITLE use CSS:
在文档的顶部，在 TITLE 下方使用 CSS：
<style type="text/css">body {visibility: hidden;}</style>
And after this use JS to restore the visibility:
在此之后使用 JS 恢复可见性：
<script type="text/JavaScript">
document.write('<style type="text/css">body {visibility: visible;}</style>');
</script>
Enjoy :)
享受 ：）
