隐藏页面，直到加载所有内容高级
我有一个大量使用jQuery的网页。
我的目标是只在一切准备就绪时显示页面。
有了这个我想避免向用户显示恼人的页面呈现。
到目前为止我试过这个（ #body_holder是一个包装体内部）：
$(function(){ $('#body_holder').hide(); }); $(window).load(function() { $("#body_holder").show(); });
这完全没问题，但弄乱了布局。
问题是隐藏包装器会干扰使用的其他jQuery函数和插件（例如layout-plugin）。
所以我想必须有另一个技巧来做到这一点。 也许在window.load发生之前，在身体上放置一张图片或div？
你用什么方法？
编辑：
解决方案最有可能是另一种方式而不是display:none或hide() ;
使用jQuery做的任何事情通常都要等到document.ready，这已经太晚了恕我直言。
将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; }
- This
- is
- a
- simple
- test
- of
- a
- cover
LOADING
您应该尝试将可见性设置为隐藏而不是display：none。 将可见性设置为隐藏将保留所有元素位置和尺寸，因此不应创建布局问题。
这是一个jQuery解决方案，适合那些寻找：
使用css隐藏正文，然后在加载页面后显示它：
CSS：
html { visibility:hidden; }
JavaScript的
$(document).ready(function() { document.getElementsByTagName("html")[0].style.visibility = "visible"; });
页面将从空白变为显示加载页面时的所有内容，没有内容闪烁，没有观看图像加载等。
你的问题是有效的，但是当事情发生时我不会隐藏或覆盖页面。
它使用户无法理解页面上发生的事情。 虽然可能需要加载很多东西，但页面的不同部分应该在加载时生动。 您应该参与锁定尚未就绪的控件，可能会在其上显示微调器或其他一些进度指示器。 或者将cursor设置为wait加载项目。
这使用户保持循环，并允许他在部件上线时查看和交互部件，而不是模糊所有部件，直到所有部件都准备就绪。
您通常希望首先加载用户需要最快访问的内容，通常是首屏。 加载是一个优先级，可以很容易地与Promises协调。
至少看到页面允许用户获得他的方位并决定做什么。 要透明。
如果你有一个div #bodyholder，你可以在你的CSS中放置display：none，然后使用jQuery do：
$(document).ready(function() { $('#body_holder').show(); });
我不明白为什么隐藏div应该干扰任何东西的加载，因为它意味着它是隐藏的。 但是，如果您使用了大量的jQuery，请确保将其包装在$（document）.ready中，以确保在执行Javascript之前完全加载DOM
另一点是HTML / CSS是为渐进式加载而设计的，如果你正确地执行它，那么你可以为用户获得一个很好的渐进式内容加载。 我个人不希望我的用户在加载所有内容之前几秒钟都会看到白屏。 将您的Javascript移动到页面末尾，以便它不会阻止加载并尽快将内容添加到屏幕上。