首先，一个侧面：一般来说，网页设计师会花费大量时间来尝试缩短感知的页面加载时间，以便尽快显示内容。这会主动走向相反的方向，在一切准备就绪之前呈现空白页面，这可能并不理想。
但如果它适合您的情况：
因为所有可见的东西都是body，你可以加载body隐藏然后淡入。为没有 JavaScript 的用户提供后备措施（通常至少少于 2%）是很重要的据雅虎报道 http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/，但仍然）。所以沿着以下思路：
（实时复制） http://jsbin.com/oxicix/
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- This next would probably be in your main CSS file, but shown
inline here just for purposes of the example
-->
<style type="text/css">
body {
/* Hide it for nifty fade-in effect */
display: none;
}
</style>
<!-- Fallback for non-JavaScript people -->
<noscript>
<style type="text/css">
body {
/* Re-displays it by overriding the above */
display: block;
}
</style>
</noscript>
</head>
<body>
...content...
<script src="jquery.js"></script>
<script>
// This version runs the function *immediately*
(function($) {
$(document.body).fadeIn(1000);
})(jQuery);
</script>
</body>
</html>
其中脚本部分有一些变化，具体取决于您希望淡入发生的时间：
等待“就绪”事件：
实时复制 http://jsbin.com/oxicix/2
// This version waits until jQuery's "ready" event
jQuery(function($) {
$(document.body).fadeIn(1000);
});
等待window#load event:
实时复制 http://jsbin.com/oxicix/3
// This version waits until the window#load event
(function($) {
$(window).load(function() {
$(document.body).fadeIn(1000);
});
})(jQuery);
window#load fires very在页面加载过程的后期，在加载所有外部资源（包括所有图像）之后。但您说您想等到所有内容都加载完毕，所以这可能就是您想要做的。它肯定会让你的页面看起来更慢......
