jQuery 隐藏所有内容直到页面完成加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22095529/
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
Hiding everything until the page has finished loading
提问by Pete Norris
I am looking to have everything on my page hidden until the page has finished loading. I have seen many posts and tried different things. The most common solution which works great is
我希望在页面加载完成之前隐藏页面上的所有内容。我看过很多帖子并尝试过不同的东西。效果很好的最常见的解决方案是
<body style="display:none;">
Then run jQuery to show it again upon window load
然后运行 jQuery 以在窗口加载时再次显示它
$(window).load(function() {
$("body").fadeIn("slow");
});
I have an issue with this, as the page is reliant on JS to show anything at all. I appreciate this is a rare thing, but just feels wrong.
我对此有一个问题，因为该页面完全依赖 JS 来显示任何内容。我很欣赏这是一件罕见的事情，但只是感觉不对。
Ideally I would like to use jQuery to add the display:none css as well
理想情况下，我想使用 jQuery 添加 display:none css
however...
然而...
The problem is when I add
问题是当我添加
$(document).ready(function {
$(body).css('display', 'none');
});
Even this takes a while to run and the page flickers with content before hand.
即使这需要一段时间才能运行，并且页面会预先显示内容。
Is there a better way?
有没有更好的办法？
Could I use the above script without document.ready (tried, but didn;t work)
我可以在没有 document.ready 的情况下使用上面的脚本吗（尝试过，但没有用）
Thanks.
谢谢。
回答by A. Wolff
To hide it using javascript, set script just after BODY tag declaration:
要使用 javascript 隐藏它，请在 BODY 标记声明之后设置脚本：
<body>
<script>document.body.style.display = "none";</script>
This way if javascript disabled, BODY is still shown
这样，如果禁用 javascript，仍会显示 BODY
回答by Colin Bacon
The approach I use it to have a jsclass and a hidden-until-readyclass. My hidden until ready styles are only applied if there is a jsclass.
我用它来创建一个js类和一个hidden-until-ready类的方法。我的隐藏直到就绪样式仅在有js类时才应用。
e.g
例如
.js .hidden-until-ready {
visibility: hidden;
}
the jsclass is applied at the start if JavaScript is enabled.
在js是否启用JavaScript类是在开始应用。
document.documentElement.className = document.documentElement.className + ' js';
Then in jQuery I remove the hidden-until-readyonce the page has loaded.
然后在 jQuery 中，我hidden-until-ready在页面加载后删除。
jQuery(document).ready(function () {
jQuery('.hidden-until-ready').removeClass('hidden-until-ready');
});
This way the elements of the page are only hidden at the start if JavaScript is enabled and once the page has loaded the elements are visible again.
这样，如果启用了 JavaScript，页面的元素只会在开始时隐藏，并且一旦页面加载，元素就会再次可见。
回答by Ashwini Verma
Try this example. http://jsfiddle.net/iashu/AaDeF/
试试这个例子。http://jsfiddle.net/iashu/AaDeF/
<div id="loading"></div>
<div id="container">
container content....
</div>
Jquery
查询
$(window).load(function() {
//show();
});
function show() {
$('#loading').hide();
$('#container').fadeIn();
};
setTimeout(show, 3000);
回答by Jai
If I have to do it then I would do it this way:
如果我必须这样做，那么我会这样做：
in the css I would hide the body:
在 css 中，我会隐藏身体：
body{ display:none; }
then with jQuery:
然后使用 jQuery：
$(window).load(function() {
$("body").fadeIn("slow");
});
Although you have posted this:
虽然你已经发布了这个：
$(document).ready(function() {
$(body).css('display', 'none'); // $(body) is missing the quotes
});
you can try this:
你可以试试这个：
$(document).ready(function() {
$('body').hide();
});
回答by CodeFanatic
Try this
尝试这个
$('#domelement').css('opacity', 0);
$(window).load(function() {
$('#domelement').css('opacity', 1);
});
replace "domelement" with the selector of the DOM element(s) you want to hide till loaded
用要隐藏直到加载的 DOM 元素的选择器替换“domelement”
回答by LDJ
I would do the following
我会做以下
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body class="hidden">
this is the body...
<script type="text/javascript">
$(document).ready(function(){
$("body").removeClass('hidden');
});
</script>
</body>
</html>
So hide it in inline CSS in the header (so it will take immediate effect and not suffer the latency of fetching an external file), then revel it in Javascript. Note: this isn't best practice with inline CSS and JS, but should give you the lowest latency and therefore not have a flash of visibility.
因此，将它隐藏在标题中的内联 CSS 中（这样它会立即生效并且不会受到获取外部文件的延迟），然后在 Javascript 中陶醉。注意：这不是内联 CSS 和 JS 的最佳实践，但应该为您提供最低延迟，因此没有可见性。
回答by Pratik
Give class to body and set Its css to "display:none"; Then Put the code before "body" tag
将类赋予主体并将其 css 设置为“display:none”；然后将代码放在“body”标签之前
$(document).ready(function {
$('#bodyOuter').show();
});
So ,It will be hidden and after page loads It will be shown
所以，它将被隐藏，并在页面加载后显示
回答by Kireeti K
Flicker you mentioned is coming because by the time jquery hides the body, browser would have started painting the dom. Better solution is to hide it with css, which should avoid showing anything at all while page is being loaded, then you can unhide body inside jquery.load()
您提到的闪烁即将到来，因为当 jquery 隐藏主体时，浏览器将开始绘制 dom。更好的解决方案是用 css 隐藏它，这应该避免在页面加载时显示任何内容，然后您可以在 jquery.load() 中取消隐藏正文
