Question

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

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

我希望避免向用户显示烦人的页面呈现。

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

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

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

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

所以我猜必须有另一个技巧来做到这一点。在window.load发生之前，可能会在身体上放置一张图片或div？

您使用什么方法？

编辑：

解决方案最有可能不是display:none或hide();

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

Answer 2

这是一个针对那些寻找的jQuery解决方案：

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

CSS：

html { visibility:hidden; }

的JavaScript

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

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

Answer 3

您应该尝试将可见性设置为隐藏而不是display：none。将可见性设置为隐藏将保留所有元素位置和尺寸，因此不应创建布局问题。

Answer 4

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

它使用户无法了解页面上正在发生的事情。尽管可能需要加载很多东西，但是页面的不同部分应该在加载时栩栩如生。您应该练习锁定尚未准备就绪的控件，也许在控件上显示微调器或其他进度指示器。或在加载项目时将cursor设置为wait。

这可以使用户始终处于循环状态，并允许他们在零件在线时查看零件并与之交互，而不用遮盖所有零件直到一切准备就绪。

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

至少，看到该页面可以使用户了解自己的方位并决定该怎么做。要透明。

Answer 5

使用以下内容启动HTML：

<body style="opacity:0;">

在脚本末尾：

document.body.style.opacity = 1;

Answer 6

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

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

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

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

在体内，该类可用作

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

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

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

Answer 7

我想出的最简单的解决方案是按照前面的建议将主体包裹在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>

Answer 8

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

CSS：

html { visibility:hidden; }

JS：

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

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

Answer 9

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

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

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

另一点是HTML / CSS是为渐进式加载而设计的，如果你正确地执行它，那么你可以为用户获得一个很好的渐进式内容加载。我个人不希望我的用户在加载所有内容之前几秒钟都会看到白屏。将您的Javascript移动到页面末尾，以便它不会阻止加载并尽快将内容放到屏幕上。

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

9 个答案: