我讨厌你如何真正看到网页加载。我认为等待页面完全加载并准备好显示（包括所有脚本和图像）然后让浏览器显示它会更有吸引力。所以我有两个问题......
提前感谢您的智慧！
答案 0 :(得分：29)
对于给出的所有原因，这是一个非常糟糕的主意，等等。也就是说，这是你使用jQuery：
的方式<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#body').show();
$('#msg').hide();
});
</script>
</body>
如果用户禁用了JavaScript，则他们永远不会看到该页面。如果页面永远不会完成加载，他们永远不会看到页面。如果页面加载时间太长，他们可能会认为出现了问题而只是去其他地方而不是*请等待...... *。
答案 1 :(得分：19)
我认为这是一个非常糟糕的主意。用户喜欢看到进步，简单明了。将页面保持在一个状态几秒钟，然后立即显示加载的页面将使用户感觉没有任何事情发生，并且您可能会失去访问。
一个选项是在后台处理内容时在页面上显示加载状态，但这通常是在网站实际处理用户输入时保留的。
http://www.webdeveloper.com/forum/showthread.php?t=180958
最重要的是，你至少需要在页面加载时显示一些视觉活动，我认为一次只能将页面加载成小块（假设你没有做那些认真的事情）减慢页面加载时间。）
答案 2 :(得分：10)
对此有一定的有效用途。一种是阻止人们点击链接/导致JavaScript事件发生，直到加载了所有页面元素和JavaScript。
在 IE 中，您可以使用页面转换，这意味着页面在完全加载之前不会显示：
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />
请注意持续时间短。这足以确保页面在完全加载之前不会显示。
在 FireFox 和其他浏览器中，我使用的解决方案是创建一个页面大小和白色的DIV，然后在页面的最后放入JavaScript中隐藏它。另一种方法是使用jQuery并隐藏它。不像IE解决方案那样轻松，但两者都运行良好。
答案 3 :(得分：10)
这是使用jQuery的解决方案：
<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
$('#container').css('opacity', 1);
});
</script>
我把这个脚本放在我的</body>标签之后。只需将“#container”替换为要隐藏的DOM元素的选择器即可。我尝试了几种变体（包括.hide() / .show()和.fadeOut() / .fadeIn()），只是设置不透明度似乎有最少的不良影响（闪烁，变化）页面高度等）。您还可以将css('opacity', 0)替换为fadeTo(100, 1)，以实现更顺畅的转换。 （不，fadeIn()不起作用，至少不在jQuery 1.3.2下。）
现在注意事项：我实现了上述内容，因为我正在使用TypeKit，当你刷新页面并且字体加载几百毫秒时会出现烦人的闪烁。因此，在TypeKit加载之前，我不希望任何文本出现在屏幕上。但是，如果您使用上面的代码并且页面上的某些内容无法加载，那么显然您遇到了大麻烦。有两种明显的方法可以改进：
我不打算在这里实施加载指示器，但时间限制很容易。只需将其添加到上面的脚本中：
$(document).ready(function() {
setTimeout('$("#container").css("opacity", 1)', 1000);
});
现在，在最糟糕的情况下，您的页面将需要额外的秒钟才能显示。
答案 4 :(得分：4)
还要确保服务器缓存页面，并且立即（构建时）将其流式传输到客户端浏览器。
由于您尚未指定技术堆栈：
答案 5 :(得分：4)
立即关注你的＆lt; body＆gt;标签添加这样的东西......
<style> body {opacity:0;}</style>
对于你的＆lt; head＆gt;中的第一件事添加类似......的内容。
<script>
window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
</script>
这是好的做法还是坏的取决于你的访客和等待的时间。
这个问题仍然悬而未决，我在这里看不到任何答案是如何确保页面稳定。例如，如果要加载字体，页面可能会重新回转一下，直到加载并显示所有字体。我想知道是否有一个事件告诉我页面已完成渲染。
答案 6 :(得分：3)
强制性：“使用jQuery”
我已经看到过将黑色或白色div放在页面顶部的所有页面，然后在document.load事件中将其删除。或者你可以在jQuery中使用.ready 这就是说，它是我见过的最烦人的网页之一，我会反对它。
答案 7 :(得分：3)
您可以使用某些css隐藏所有内容：
#some_div
{
display: none;
}
然后在javascript中为document.onload分配一个函数来删除该div。
jQuery让这样的事情变得非常简单。
答案 8 :(得分：3)
虽然这并不总是一个好主意，但您可以自由决定是否真的想这样做。有一些不同的方法可以做到这一点，我在这里找到了一个简单的例子：
http://www.reconn.us/content/view/37/47/
可能不是最好的，但它应该可以帮助您开发自己的解决方案。祝你好运。
答案 9 :(得分：2)
除了Trevor Burnham的回答，如果你想处理disabled javascript和defer css loading
<强> HTML5
<html class="no-js">
<head>...</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
<强> CSS
//at the beginning of the page
.js main, .js footer{
opacity:0;
}
JAVASCRIPT
//at the beginning of the page before loading jquery
var h = document.querySelector("html");
h.className += ' ' + 'js';
h.className = h.className.replace(
new RegExp('( |^)' + 'no-js' + '( |$)', 'g'), ' ').trim();
JQUERY
//somewhere at the end of the page after loading jquery
$(window).load(function() {
$('main').css('opacity',1);
$('footer').css('opacity',1);
});
<强>资源
答案 10 :(得分：2)
在PHP-Fusion开源CMS，http://www.php-fusion.co.uk中，我们这样做是在核心 -
<?php
ob_start();
// Your PHP codes here
?>
YOUR HTML HERE
<?php
$html_output = ob_get_contents();
ob_end_clean();
echo $html_output;
?>
您将无法逐个查看任何内容。唯一的加载器将是您的浏览器选项卡微调器，它只是在加载所有内容后立即显示所有内容。试一试。
此方法完全符合html文件。
答案 11 :(得分：1)
虽然我同意其他人的意见，但你不应该这样做，我只是简单地解释一下你可以做些什么来做一个小的改变，而不是一路走来，实际上阻止已经存在的内容 - 也许这足以让你和你的访客都满意。
浏览器开始加载页面，稍后将处理外部定位的css和js，特别是如果css / js链接的位置在“正确”位置。 （我认为建议是尽可能晚地加载js，并使用你在头文件中加载的外部css）。现在，如果您希望尽快应用css和/或js的某些部分，只需将其包含在页面本身中即可。这将违背YSlow等性能工具的建议，但它可能会增加您希望显示的页面更改。只在真正需要时才使用它！
答案 12 :(得分：0)
您可以首先让您网站的主索引页面只包含“正在加载”的消息。从这里你可以使用ajax获取下一页的内容并将其嵌入到当前页面中，完成后删除“正在加载”消息。
您可以在页面顶部包含一个100％宽度/高度的加载消息容器，然后在加载完成时删除所述div。
后者在两种情况下可能无法完美运行，并且取决于浏览器如何呈现内容。
我不确定这是不是一个好主意。对于简单的静态站点，我会说不。但是，我最近看到很多重型javascript网站来自使用复杂动画并且是一页的设计公司。这些站点使用加载消息等待加载所有脚本/ html / css，以便页面按预期运行。
答案 13 :(得分：0)
我知道这是一个老线程，但仍然。另一个简单的选择是这个库：http://gayadesign.com/scripts/queryLoader2/
答案 14 :(得分：0)
不要使用display：none。如果这样做，当您执行show（）时，您将看到图像调整大小/重新定位。使用visibility：hidden而不是它会正确地放置所有内容，但只有在你告诉它之后它才会被看到。
答案 15 :(得分：0)
希望此代码能够提供帮助
<html>
<head>
<style type="text/css">
.js #flash {display: none;}
</style>
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
</head>
<body>
<!-- the rest of your code goes here -->
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
// Stuff to do as soon as the body finishes loading.
// No need for $(document).ready() here.
</script>
</body>
</html>