我讨厌您如何实际看到网页加载。我认为等待页面完全加载并准备好显示（包括所有脚本和图像），然后让浏览器显示它会更有吸引力。所以我有两个问题...
- 我怎样才能做到这一点？
- 我对 Web 开发完全是个菜鸟，但这是常见的做法吗？如果不是，为什么？
在此先感谢您的智慧！
如何让浏览器等待页面完全加载后才显示？
IT技术
javascript
css
web
2021-01-28 00:46:23
6个回答
出于所有给定的原因，这是一个非常糟糕的主意，甚至更多。也就是说，这里是你如何使用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。
我认为这是一个非常糟糕的主意。用户喜欢看到进步，简单明了。将页面保持在一个状态几秒钟，然后立即显示加载的页面会让用户觉得什么都没发生，你很可能会失去访问。
一种选择是在后台处理东西时在您的页面上显示加载状态，但这通常是为网站实际处理用户输入时保留的。
http://www.webdeveloper.com/forum/showthread.php?t=180958
最重要的是，您至少需要在页面加载时显示一些视觉活动，而且我认为一次加载小块页面并不是那么糟糕（假设您没有做一些会严重减慢页面速度的事情）加载时间）。
这当然有一个有效的用途。一种是防止人们点击链接/导致 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 解决方案那么轻松，但两者都运行良好。
这是使用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 加载之前，我不希望任何文本出现在屏幕上。但是很明显，如果您使用上面的代码并且页面上的某些内容无法加载，那么您就会遇到大麻烦。有两个明显的方法可以改进它：
- 最大时间限制（例如 1 秒），之后无论页面是否加载，所有内容都会出现
- 某种加载指示器（比如来自http://www.ajaxload.info/ 的东西）
我不会在这里费心实施加载指示器，但时间限制很容易。只需将其添加到上面的脚本中：
$(document).ready(function() {
setTimeout('$("#container").css("opacity", 1)', 1000);
});
所以现在，在最坏的情况下，您的页面将需要额外的一秒钟才能出现。
还要确保服务器缓冲页面并且不会立即（在构建时）将其流式传输到客户端浏览器。
由于您尚未指定您的技术堆栈：
- PHP：查看ob_start
- ASP.NET：确保 Response.BufferOutput = True（默认情况下）
其它你可能感兴趣的问题