隐藏页面直到所有内容都加载完毕高级答案

【问题标题】：Hide page until everything is loaded Advanced隐藏页面直到所有内容都加载完毕高级
【发布时间】：2012-03-21 23:41:24
【问题描述】：

我有一个大量使用 jQuery 的网页。

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

因此，我想避免向用户显示烦人的页面渲染。

到目前为止我已经尝试过了（#body_holder 是 body 中的一个包装器）：

$(function(){
    $('#body_holder').hide();
});
$(window).load(function() {
    $("#body_holder").show();
});

这完全没问题，但会弄乱布局。

问题在于隐藏包装会干扰其他使用的 jQuery 函数和插件（例如 layout-plugin）。

所以我想必须有另一个技巧来做到这一点。也许在 window.load 发生之前将图片或 div 放在 body 上？

你使用什么方法？

编辑：

解决方案很可能必须是display:none 或hide() 之外的其他方式；

【问题讨论】：

你有没有想过使用 CSS 将 display:none 应用到#body_holder，然后使用 $(document).ready(function(){ $("#body_holder").show(); });一旦 DOM 准备就绪，是否将其纳入视野？
如果您在 HTML 中指定图像大小，则页面在加载时不会那么烦人的“跳跃”。如果你做对了，渲染可能会比等到所有东西都加载好才能看到或做任何事情要少得多。如果您真的想这样做，请重新考虑。
@Ohgodwhy 是的。这实际上是我第一次尝试。显示：没有在身体上。但这与我的示例相同。问题还是一样。它隐藏但显示布局和所有其他东西都搞砸了。
@GolezTrol 谢谢。我在页面上没有任何图像。它呈现内容和布局。
不要使用 display:none，而是使用 opacity:0。和 filter:alpha(opacity=0);

标签： javascript jquery document-ready

【解决方案1】：

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

【讨论】：

这不是你的包装器，它是一个新元素，定位固定并且具有高 z-index，你可以将元素放在代码中的任何位置，它会覆盖你的网站，直到它被 JS 移除，这意味着您保持其他站点元素可见，但被“cover”元素覆盖。
谢谢和抱歉。我搞砸了代码尝试。这确实有效:) 你认为我可以通过展示粉红色的独角兽和星星来让它更漂亮吗？ ;)
不赞成票是怎么回事，如果答案在某些方面有误，请随时解释？
不，您将其作为已接受的答案删除了，这没关系，其他人早些时候投了反对票，但谁在乎，至少您让它工作了 :-)
@IHafid - 是的，它可能会对 SEO 造成损害，但如今的爬虫已经足够聪明，可以找出大多数东西，包括 ajax 和框架等，所以它也不是给定的。

【解决方案2】：

这是一个 jQuery 解决方案，适合那些正在寻找的人：

用css隐藏body，页面加载后显示：

CSS：

html { visibility:hidden; }

JavaScript

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

当页面加载时，页面将从空白变为显示所有内容，没有内容闪烁，没有观看图像加载等。

【讨论】：

如果你使用 jquery，我认为没有缺点。
$ 是 jQuery 而不是纯 JavaScript。
最简洁的解决方案 - 使用 'html' 元素本身的 'visibility' 属性消除了对包装器的需要。

【解决方案3】：

您应该尝试将可见性设置为隐藏而不是显示：无。将可见性设置为隐藏将保留所有元素的位置和尺寸，因此不会造成布局问题。

【讨论】：

这很好用。谢谢+1。我希望它是跨浏览器有效的。
页面加载时，无法设置 document.style.visibility 元素（稍后为空）。但是，我的老板告诉我你可以设置 document.style.opacity = 0。

【解决方案4】：

开始你的HTML：

<body style="opacity:0;">

在脚本的结尾：

document.body.style.opacity = 1;

【讨论】：

对我不起作用，但这确实有效：document.getElementsByTagName("body")[0].style.opacity = "1";
有时它对我也不起作用，我使用你的建议，我不知道为什么。

【解决方案5】：

您的问题是有效的，但我不会在事情发生时隐藏或覆盖页面。

它使用户无法理解页面上发生的事情。虽然可能需要加载很多东西，但页面的不同部分在加载时应该会变得栩栩如生。您应该练习锁定尚未准备好的控件，可能会在它们上方显示一个微调器或其他一些进度指示器。或者在加载项目时将cursor 设置为wait。

这让用户保持在循环中，并允许他在部件上线时查看并与之交互，而不是在一切准备就绪之前隐藏所有部件。

您通常希望首先加载用户需要最快访问的内容，通常是首屏内容。加载是一个可以轻松与 Promises 协调的优先级。

至少看到页面可以让用户了解自己的方向并决定做什么。保持透明。

【讨论】：

【解决方案6】：

我一直在寻找一种非 JavaScript 解决方案，因此我找到了一种可以在大多数浏览器上以可接受的方式运行的解决方案。

由于 CSS 规则的加载顺序很重要；

在第一个 CSS 文件中定义隐藏类或在 head 中内联。

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

在正文中，类可以用作

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

在加载所有其他 CSS 和 JS 文件后，在内联或在 CSS 文件中重新定义它

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

【讨论】：

【解决方案7】：

偶然发现并尝试了@9ete 的解决方案，但对我没有帮助。这反而奏效了：

CSS：

html { visibility:hidden; }

JS：

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

根据window 的文档，load 事件在所有内容（包括图像）加载后触发，而$document 表示ready 仅在 DOM 准备好后触发。

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

如果你有一个 div #bodyholder，那么你可以将 display:none 放在你的 CSS 中，然后用 jQuery 做：

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

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

还有一点是 HTML/CSS 是为渐进式加载而设计的，如果你做得好，你可以为你的用户获得一个很好的渐进式加载内容。我个人不希望我的用户在加载所有内容之前获得几秒钟的白屏。将您的 Javascript 移到页面末尾，这样它就不会阻止加载并尽快将内容显示到屏幕上。

【讨论】：

嗨。这与我的示例完全相同。如果 dom 准备好，css 只能隐藏 div。这是我第一次尝试使用 CSS 进行隐藏。问题显然保持不变。我的 jquery 改变了布局并隐藏了 div。我例如使用layout.jquery-dev.net。 show() 的页面搞砸了。我真的在寻找一种优雅的方式来以某种方式覆盖包装器。
布局插件需要能够设置尺寸，所以隐藏主要内容元素不是一个好主意
@charlietfl 谢谢你实际上是第一个考虑这个的人。我现在在我的问题中加粗了。