Javascript 隐藏页面，直到加载所有内容

我有一个网页大量使用jQuery

我的目标是只在一切就绪时显示页面

因此，我希望避免向用户显示恼人的页面呈现

到目前为止，我已经试过了（

#body#u holder

是body内的一个包装器）：

这完全可以，但会弄乱布局

问题是隐藏包装会干扰其他jQuery函数和使用的插件（例如布局插件）

所以我想肯定还有另一个窍门。可能会在身体上放一张照片或一个div，直到出现窗口负载

你使用什么方法

编辑：

解决方案很可能是另一种方式，而不是

显示：无
或
隐藏（）
 如果您有一个div#bodyholder，那么您可以将display:none放在CSS中，然后使用jQuery执行：

$(document).ready(function() {
     $('#body_holder').show();
});

我不明白为什么隐藏div会干扰任何东西的加载，因为这意味着它是隐藏的。但是，如果使用了大量jQuery，那么请确保将其包装在$（document）.ready中，这将确保在执行Javascript之前完全加载DOM

还有一点是HTML/CSS是为渐进式加载而设计的，如果你做得好，你可以为你的用户获得一个很好的渐进式加载内容。我个人不希望我的用户在加载所有内容之前几秒钟都能看到白色屏幕。将您的Javascript移动到页面的末尾，以便它不会阻止加载并尽快将内容显示到屏幕上。
使用jQuery完成的任何操作通常都必须等待document.ready，这已经太晚了

在顶部放置一个div，如下所示：

<div id="cover"></div>

并在加载所有元素时使用JS隐藏它：

$(window).on('load', function() {
   $("#cover").hide();
});

或者，如果由于某种原因，您的脚本使用的时间比要加载的DOM元素还要长，请设置一个间隔来检查加载速度最慢的某个函数的类型，并在定义了所有函数后移除该覆盖


$（窗口）.on（'load'，function（））{
美元（“#封面”）。淡出（200）；
});
//stackoverflow不能正确触发窗口加载，用假加载代替
函数newW（）
{
$（window.load（）；
}
setTimeout（newW，1000）
#封面{位置：固定；高度：100%；宽度：100%；顶部：0；左侧：0；背景：#000；z索引：9999；
字体大小：60px；文本对齐：居中；填充顶部：200px；颜色：#fff；
}


这个
是
a
简单的
试验
的
a
掩护

加载
您应该尝试将可见性设置为“隐藏”，而不是“显示：无”。将“可见性”设置为“隐藏”将保留所有元素的位置和尺寸，因此不会产生布局问题。
以下是一个jQuery解决方案：

使用css隐藏正文，然后在加载页面后显示：

CSS:

JavaScript

$(document).ready(function() {
  document.getElementsByTagName("html")[0].style.visibility = "visible";
});

加载页面时，页面将从空白变为显示所有内容，没有内容闪烁，没有观看图像加载等。
你的问题是正确的，但我不会在事情发生时隐藏或覆盖页面

它让用户无法理解页面上发生的事情。虽然很多东西可能需要加载，但页面的不同部分在加载时会变得栩栩如生。您应该开始锁定未准备就绪的控件，可能会在其上显示微调器或其他进度指示器。或在加载项目时将
光标设置为
等待

这让用户处于循环中，并允许用户在部件联机时查看并与之交互，而不是在一切就绪之前隐藏所有部件

通常情况下，您会希望首先加载用户需要最快访问的内容，通常是折叠上方的内容。加载是一种优先级排序，可以很容易地与承诺相协调

至少，看到页面可以让用户了解自己的方向并决定做什么。透明。
我正在寻找一个非javascript的解决方案，所以我找到了一个可以在大多数浏览器上以可接受的方式工作的解决方案

因为CSS规则的加载顺序很重要


在第一个CSS文件或内嵌头中定义隐藏类


在主体中，类可以用作

我提出的最简单的解决方案是按照前面的建议将主体包装在一个文件中，但将其设置为隐藏，然后在加载所有组件后使用JQuery（或javascript）在加载时取消隐藏



你好，世界！
$（文档）.ready（函数（）{
//在此处添加JQuery小部件加载
$（“#bodyDiv”）.show（）；//显示完整页面
})
以以下内容开始HTML：


在脚本末尾：

document.body.style.opacity=1
偶然发现了这一点，并尝试了@9ete的解决方案，但对我没有帮助。
相反，这起了作用：

CSS:

JS:

根据的文档，加载所有内容（包括图像）后会触发
load
事件，而只有DOM准备就绪后才会触发
ready
。
您是否考虑过使用CSS应用显示：对#body_holder应用none，然后使用$（document）.ready（function（）{$（“#body_holder”）.show（））；如果你在HTML中指定了图像的大小，当页面被加载时，页面就不会那么令人讨厌的“跳跃”了。如果您这样做是正确的，渲染可能会比等待加载所有内容之后才能查看或执行任何操作要轻松得多。如果你真的想这么做，请重新考虑。@ohgod为什么是的。这实际上是我第一次尝试。显示：主体上无。但这和我的例子是一样的。问题还是一样。它隐藏了，但在展示中，布局和所有其他东西都乱七八糟。@GolezTrol谢谢。我不知道
$(window).on('load', function() {
   $("#cover").hide();
});

html { visibility:hidden; }

$(document).ready(function() {
  document.getElementsByTagName("html")[0].style.visibility = "visible";
});

.hidden-onpage-load{ display: none; } 

<div class="hidden-onpage-load"> ... </div>

.hidden-onpage-load{ display: block; } 

html { visibility:hidden; }

window.addEventListener('load', function () {
    document.getElementsByTagName("html")[0].style.visibility = "visible";
});