我恨你怎么能实际看到的网页加载。 我觉得这是更吸引人等到页面完全加载并准备显示，包括所有脚本和图像，然后让浏览器中显示它。 所以，我有两个问题...
- 我怎样才能做到这一点？
- 我是一个总的小白web开发，但是这是常见的做法？ 如果不是，为什么？
预先感谢您的智慧！
Answer 1:
这是所有的给出的理由，多一个非常糟糕的主意。 这就是说，这里是它的使用你怎么做的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，他们从来没有看到的网页。 如果页面无法完成加载，他们从来没有看到的网页。 如果页面需要很长时间来读取，但可以假设出了问题，只是去其他地方，而不是*请稍候... * ING的。
Answer 2:
我认为这是一个非常糟糕的主意。 用户希望看到的进步，简单明了。 保持页面的一个状态几秒钟，然后立即显示网页加载会让用户感觉像什么都没发生，你可能会失去访问。
一种选择是对您的网页，而在后台的东西进程上加载状态，但是这通常保留给时，该网站实际上是在做对用户输入处理。
http://www.webdeveloper.com/forum/showthread.php?t=180958
底线，你至少需要表现出一定的视觉活动，而加载页面时，我认为在一个时间具有小件页面加载速度是不是所有的坏的（假设你没有做的事情，严重减慢页面加载时间）。
Answer 3:
当然是有这个有效的使用。 一是要防止有人点击链接/导致出现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解决方案，但都效果不佳。
Answer 4:
下面是使用jQuery的解决方案：
<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
$('#container').css('opacity', 1);
});
</script>
我把这个脚本只是我的后</body>标签。 只是你要隐藏的DOM元素（一个或多个）选择替换“的#container”。 我想这几个变化（包括.hide() / .show()和.fadeOut() / .fadeIn()并且只设置不透明度似乎有最少的不良影响（闪烁，改变页面高度等）。 您也可以替换css('opacity', 0)与fadeTo(100, 1)为平滑的过渡。 （无， fadeIn()将无法正常工作，至少不是jQuery的1.3.2下。）
现在的告诫：我实现了上面，因为我使用TypeKit，当你刷新页面，字体需要几百毫秒加载有一个恼人的闪烁。 所以，我不希望任何文本，直到TypeKit加载出现在屏幕上。 但很明显，你在大麻烦，如果你使用上面的代码，并在网页上的东西无法加载。 有迹象表明，它可以改善两个明显的方式：
- 最大时间限制（比如，1秒）之后，一切都将出现在页面是否加载与否
- 某种负荷指标（比如，从东西http://www.ajaxload.info/ ）
我不会打扰在这里实现负载指示，但是时间限制很容易。 只需添加这上面的脚本：
$(document).ready(function() {
setTimeout('$("#container").css("opacity", 1)', 1000);
});
所以，现在，最坏的情况下，你的页面将采取额外的第二个出现。
Answer 5:
另外，还要确保服务器缓存的页面，并立即不（同时建设）流式传输到客户端浏览器。
既然你没有指定你的技术堆栈：
- PHP：考虑ob_start
- ASP.NET：确保Response.BufferOutput = TRUE（这是默认设置）
Answer 6:
紧随你的<body>标签中添加这样的事情...
<style> body {opacity:0;}</style>
而在你的<head>的第一件事添加类似...
<script>
window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
</script>
至于这是很好的做法是坏，取决于您的访客，并等待所花费的时间。
即STIL开着，我不是在这里看到任何答案的问题是如何确保该页面已经稳定。 例如，如果要加载的字体，直到所有的字体被加载和显示的页面可能回流位。 我想知道，如果有，告诉我该页面完成渲染的事件。
Answer 7:
强制性：“使用jQuery”
我已经看到了把黑色或白色的div覆盖在页面顶部的一切网页，然后将其删除的document.load事件。 或者你可以在jQuery中使用。就绪话虽这么说，这是我见过的最是烦人的网页之一，我会建议反对 。
Answer 8:
你可以使用一些CSS隐藏的一切：
#some_div
{
display: none;
}
然后在javascript一个函数分配给document.onload删除该分区。
jQuery让这样的事情很容易。
Answer 9:
虽然这并不总是一个好主意，你可以自由地决定，如果你真的想这样做。 有一些不同的方法来做到这一点，我发现了一个简单的例子，在这里：
http://www.reconn.us/content/view/37/47/
也许不是最好的，但它应该帮助您开发自己的解决方案。 祝好运。
Answer 10:
除了特雷弗Burnham的答案，如果你想处理禁用了JavaScript ，并推迟加载CSS
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);
});
资源
CSS交付最优化：如何推迟加载CSS？
什么是HTML“无JS”类的目的是什么？
如何获得使用JavaScript / jQuery的的<html>标记HTML？
如何添加/ JavaScript中删除一个类？
Answer 11:
在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文件完全兼容。
Answer 12:
虽然我与其他人同意，你不应该希望它我就简单介绍一下你可以做些什么来让没有去一路小的差异，实际上封锁的内容，已经在那里-也许这将是足以让两个你和你的访客快乐。
浏览器开始加载网页，后来将处理位于外部CSS和JS，特别是如果CSS / JS链接到的地方是在“正确”的地方。 （我想建议是加载JS尽可能晚，并使用您在标题中加载外部CSS）。 现在，如果你有你的CSS和/或你想尽快地应用于JS的一些部分简单地包含在页面本身。 这将是对性能的工具，如YSlow的意见，但它可能会增加你的页面的显示出来像你希望它显示的变化。 只有真正需要的时候使用这个！
Answer 13:
您可以通过其网站的主要索引页开始仅仅有消息说“加载”。 从这里你可以使用AJAX来获取你的下一个页面的内容，并将其嵌入到当前，在完成清除“加载”的消息。
你也许能够逃脱只是包括在你的页面是100％的宽度/高度顶部加载消息容器，然后取出负载完成DIV说。
后者可能无法在这两种情况下完美地工作，并将取决于浏览器如何呈现内容。
我不是如果完全肯定是个好主意。 对于简单的静态网站，我会说没有。 不过，我已经从使用复杂的动画，并有一个网页设计公司看到了很多沉重的JavaScript的网站最近。 这些网站使用加载消息等待所有脚本/ HTML / CSS被加载，使得页面的功能如预期。
Answer 14:
我知道这是一个古老的线程，但仍。 另一种简单的选择是这个库： http://gayadesign.com/scripts/queryLoader2/
Answer 15:
不要使用显示：无。 如果你这样做，你会看到图像调整/复位，当你做节目（）。 使用visibility：hidden的替代，它会正确地打好所有的东西，但它只是直到你告诉它是不可见的。
Answer 16:
希望这个代码将有助于
<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>
文章来源: How can I make the browser wait to display the page until it's fully loaded?
