如何让浏览器等待显示页面，直到完全加载？
我讨厌你怎么能看到网页加载。 我认为等待页面完全加载并准备好显示，包括所有的脚本和图像，然后让浏览器显示这个页面会更有吸引力。 所以我有两个问题
- 我怎样才能做到这一点？
- 我是一个网页开发总noobot，但这是常见的做法？ 如果没有，为什么？
预先感谢您的智慧！
由于所有原因，这是一个非常糟糕的主意。 这就是说，这是你如何使用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，他们将永远不会看到该页面。 如果页面永不完成加载，他们永远不会看到页面。 如果页面加载时间过长，他们可能会认为出了问题，而不是去*请等待。
我认为这是一个非常糟糕的主意。 用户喜欢看到进步，简单明了。 保持页面在一个状态几秒钟，然后即时显示加载的页面将使用户觉得没有任何事情发生，你很可能会失去访问。
一种select是在页面上显示一个加载状态，而在后台进行处理，但是这通常是在网站实际上正在处理用户input时保留的。
http://www.webdeveloper.com/forum/showthread.php?t=180958
底线，你至less需要在页面加载时显示一些视觉活动，我认为一次加载页面并不是那么糟糕（假设你没有做一些严重减慢页面的事情加载时间）。
这是一个使用jQuery的解决scheme：
<script type="text/javascript"> $('#container').css('opacity', 0); $(window).load(function() { $('#container').css('opacity', 1); }); </script>
我把这个脚本放在我的</body>标签后面。 只需将“#container”replace为您要隐藏的DOM元素的select器即可。 我尝试了几个变化（包括.show() .hide() / .show()和.fadeOut() / .fadeIn() ），只是设置不透明度似乎有最less的不良影响（闪烁，改变页面高度等）。 你也可以用fadeTo(100, 1) css('opacity', 0)代替css('opacity', 0) ，以获得更平滑的过渡。 （不， fadeIn()不会工作，至less不是在jQuery 1.3.2下）。
现在需要注意的是：我实现了上面的function，因为我使用的是TypeKit，刷新页面时会出现一个恼人的闪烁现象，字体需要几百毫秒的时间来加载。 所以我不希望任何文字出现在屏幕上，直到TypeKit加载。 但是，如果使用上面的代码，并且页面上的某些内容无法加载，那么显然你遇到了很大的麻烦。 有两个明显的方法可以改进：
- 一个最大的时间限制（比如说1秒），在这之后，无论页面是否加载，都会显示出来
- 某种加载指示器（比如http://www.ajaxload.info/ ）
我不会在这里执行加载指示器，但时间限制很容易。 只需将其添加到上面的脚本：
$(document).ready(function() { setTimeout('$("#container").css("opacity", 1)', 1000); });
所以，现在，最坏的情况下，你的网页会多出一秒。
这肯定是有用的。 一个是防止人们点击链接/导致JavaScript事件发生，直到所有的页面元素和JavaScript加载。
在IE中 ，您可以使用页面转换，这意味着页面在完全加载之前不会显示：
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" /> <meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />
注意时间短。 这足以确保页面在完全加载之前不显示。
在FireFox和其他浏览器中，我使用的解决scheme是创build一个页面大小为白色的DIV，然后在页面的最后放入JavaScript来隐藏它。 另一种方法是使用jQuery并隐藏它。 不像IE解决scheme那样无痛苦，但都工作得很好。
还要确保服务器缓冲页面，并且不会立即 （在构build时）将其stream传输到客户端浏览器。
既然你没有指定你的技术堆栈：
- PHP：看看ob_start
- ASP.NET：确保Response.BufferOutput = True（默认情况下）
强制性的：“使用jQuery”
我已经看到了页面，把黑色或白色的div覆盖页面上的所有内容，然后在document.load事件中删除它。 或者你可以在jQuery中使用.ready 这是说，这是我见过的最讨厌的网页之一，我会build议反对它 。
虽然这并不总是一个好主意，但你可以自由决定是否真的想这样做。 有一些不同的方式来做到这一点，我在这里find一个简单的例子：
http://www.reconn.us/content/view/37/47/
可能不是最好的，但它应该可以帮助你开发你自己的解决scheme。 祝你好运。
紧随你的<body>标签添加这样的东西…
<style> body {opacity:0;}</style>
而在你的<head>中的第一件事就是添加像…
<script> window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);}; </script>
至于这是好的做法还是坏的取决于你的访客，以及等待的时间。
问题仍然存在，我没有看到任何答案是如何确保页面已经稳定。 例如，如果您正在加载字体，页面可能会重新排列，直到加载并显示所有字体。 我想知道是否有事件告诉我该页面已完成渲染。
你可以隐藏一切使用一些CSS：
#some_div { display: none; }
然后在JavaScript中分配一个函数document.onload去除该div。
jQuery使这样的事情变得非常简单。
除了Trevor 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“no-js”类的目的是什么？
-
如何使用JavaScript / jQuery获取<html>标记HTML？
-
如何添加/删除JavaScript中的类？
虽然我同意其他人你不应该想要它，但我只是简单地解释一下，你可以做什么，做一个小小的改变，而不是一路走来，实际上阻止已经存在的内容 – 也许这将足以保持你和你的访客开心。
浏览器开始加载页面，稍后将处理位于外部的css和js，特别是如果css / js链接的位置在“正确的”位置。 （我认为build议是尽可能晚的加载js，并使用外部的CSS加载到标题中）。 现在，如果你有一部分你的CSS和/或js，你希望尽快应用，只需将其包含在页面本身。 这将违背YSlow等性能工具的build议，但它可能会增加显示的页面变化，就像您希望显示的那样。 只有在真正需要时才使用
在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文件。
您可以开始让您的网站的主索引页面只包含一条消息说“加载”。 从这里你可以使用Ajax获取你的下一页的内容，并将其embedded到当前的页面中，完成后删除“加载”消息。
你可能只能在页面顶部加载一个消息容器，该容器的宽度/高度为100％，然后在加载完成时删除所述的div。
后者可能无法在两种情况下完美工作，并将取决于浏览器如何呈现内容。
我不完全确定它是否是一个好主意。 对于简单的静态网站，我不会说。 不过，最近我看到很多来自使用复杂animation的devise公司的繁重的JavaScript网站，只有一页。 这些站点使用加载消息来等待加载所有脚本/ html / css，以便页面按预期运行。
我知道这是一个古老的线程，但仍然是。 另一个简单的select是这个库： http : //gayadesign.com/scripts/queryLoader2/
不要使用display：none。 如果你这样做，当你做show（）的时候，你会看到图像的大小调整/重新定位。 使用可见性：隐藏，而不是正确的，但它只是直到你告诉它看不到。
希望这个代码将有所帮助
<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>
