我有一个网页，它大量使用jQuery。
我的目标是只在所有内容准备就绪后显示页面。
这样做可以避免向用户展示令人讨厌的页面渲染过程。
到目前为止，我尝试了以下代码（#body_holder 是 body内的包装器）：
$(function(){
$('#body_holder').hide();
});
$(window).load(function() {
$("#body_holder").show();
});
这个方案完全可行，但会破坏布局。
问题在于隐藏包装器会干扰使用的其他jQuery功能和插件（例如布局插件）。
因此，我想必须有另一种技巧来实现这一点。也许可以在window.load发生之前将图片或div覆盖在body上？
你使用什么方法？
编辑：
解决方案很可能不是display:none或hide()；
使用jQuery进行的任何操作通常都需要等待document.ready事件触发，但在我看来这太晚了。
可以像这样将div置于顶部：
<div id="cover"></div>
设置一些样式：
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}
并使用JS在所有元素加载完成后隐藏它：
$(window).on('load', function() {
$("#cover").hide();
});
或者，如果由于某种原因您的脚本加载时间比DOM元素更长，请设置间隔来检查加载最慢的某些函数的类型，并在所有函数定义完毕后删除覆盖物！
$(window).on('load', function() {
$("#cover").fadeOut(200);
});
//stackoverflow does not fire the window onload properly, substituted with fake load
function newW()
{
$(window).load();
}
setTimeout(newW, 1000);#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;
font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>This</li>
<li>is</li>
<li>a</li>
<li>simple</li>
<li>test</li>
<li>of</li>
<li>a</li>
<li>cover</li>
</ul>
<div id="cover">LOADING</div>以下是一种针对jQuery的解决方案：
使用CSS隐藏主体，然后在页面加载后显示它：
CSS：
html { visibility:hidden; }
JavaScript
$(document).ready(function() {
document.getElementsByTagName("html")[0].style.visibility = "visible";
});
当页面加载时，页面将从空白变为显示所有内容，没有闪烁的内容，也没有观看图片加载等情况。
你应该尝试将visibility设置为hidden而不是display:none。将visibility设置为hidden将保留所有元素的位置和尺寸，因此不会引起布局问题。
在你的HTML中，以以下方式开始:
<body style="opacity:0;">
在你的脚本结尾处:
document.body.style.opacity = 1;
你的问题是有意义的，但我不会在页面加载时隐藏或覆盖页面。
这会阻止用户了解页面上正在发生的事情。虽然可能需要加载很多东西，但页面的不同部分应该在加载时逐渐变得活跃起来。您应该锁定尚未准备好的控件，可能在它们上面显示旋转器或其他进度指示器。或者在加载项目时将光标设置为等待。
这可以让用户保持联系，并允许他在在线部分上看到并与之交互，而不是在一切准备就绪之前遮盖所有部分。
通常，您希望首先加载用户最快速访问的内容，通常是以上折叠内容。加载是可以轻松协调使用 Promises 的优先级设置。
至少看到页面可以让用户了解情况并决定如何操作。保持透明。
.hidden-onpage-load{ display: none; }
<div class="hidden-onpage-load"> ... </div>
.hidden-onpage-load{ display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bodyDiv" hidden>
Hello World!
</div>
<script>
$(document).ready(function() {
// add JQuery widget loads here
$("#bodyDiv").show(); // reveal complete page
})
</script>别忘了，很多框架使用JavaScript来构建页面。为了防止在这些修改完成之前显示页面，您需要做一些类似于此处所描述的事情（例如，在页面末尾运行脚本以显示页面的真实内容）：
$(document).ready(function() {
$('#body_holder').show();
});
我不明白为什么隐藏一个div会影响任何加载，因为它只是意味着它被隐藏了。然而，如果您使用了大量的jQuery，请确保将其包装在$(document).ready中，这将确保DOM在执行Javascript之前完全加载。
另一个要点是HTML/CSS是为渐进式加载而设计的，如果您正确地使用它，则可以为用户获得漂亮的内容逐步加载。我个人不希望我的用户在几秒钟内看到一个白屏，直到所有内容都加载完成。将您的Javascript移动到页面底部，以便它不会阻止加载，并尽快将内容放到屏幕上。