66
我讨厌你如何看到网页加载。我认为等待页面完全加载并准备好显示，包括所有脚本和图像，然后让浏览器显示它会更有吸引力。所以我有两个问题...如何让浏览器等待在完全加载之前显示页面？
- 我该怎么做？
- 我是一个网页开发总noobot，但这是常见的做法？如果不是，为什么？
在此先感谢您的智慧！
A
回答
20
我认为这是一个非常糟糕的主意。用户喜欢看到进步，简单明了。将页面保持在一个状态几秒钟，然后立即显示已加载的页面将使用户觉得没有任何事情发生，并且您可能会失去访问。
一种选择是在页面上显示加载状态，而在后台进行处理，但这通常是在网站实际上正在处理用户输入时保留的。
http://www.webdeveloper.com/forum/showthread.php?t=180958
底线，你至少需要展示，而页面加载一些视觉上的活动，我想在一个时间具有小件页面加载速度是不是所有的坏（假设你AREN做的事情会严重减慢页面加载时间）。
+0
我设计了一个网站，使用轻量级的微调器，而沉重的东西正在加载 - 沉重的东西被设置为“display：none”。一旦所有东西都加载完毕，微调器就会淡出，内容就会消失。它现在可以很好地工作，因为微调器现在被普遍理解为*“loading，Please wait”*。注意：它使用jQuery。 – ADTC 2015-08-29 17:55:56
3
强制性的：“使用jQuery”
我已经看到了把黑色或白色的div覆盖在页面顶部的一切网页，然后将其删除的document.load事件。或者你可以在jQuery中使用.ready 这就是说，它是我见过的最厌烦的网页之一，我会建议反对它。
2
可以使用一些CSS隐藏一切：
#some_div
{
display: none;
}
，然后在JavaScript中一个函数分配给document.onload删除该分区。
jQuery使这样的事情变得非常简单。
+6
当然，如果用户没有JavaScript，他们将永远不会看到你的页面。 – 2009-09-16 19:42:26
+1
我恳求你的赦免，刺激！ – MiseryIndex 2009-12-25 19:38:03
3
虽然这并不总是一个好主意，但您可以自由决定是否真的想这样做。有一些不同的方法来做到这一点，我发现了一个简单的例子在这里：
http://www.reconn.us/content/view/37/47/
可能不是最好的一个，但它应该帮助您开发自己的解决方案。祝你好运。
0
你可以先让你的网站的主索引页面只包含一条消息说“加载”。从这里开始，您可以使用ajax获取下一页的内容并将其嵌入当前页面，完成后删除“加载”消息。
您可能只能在页面顶部包含一个宽度为100％的加载消息容器，然后在加载完成时删除所述的div。
后者可能无法在两种情况下完美工作，并且取决于浏览器如何呈现内容。
我不是如果完全肯定是个好主意。对于简单的静态网站，我会说不。不过，我最近看到很多来自使用复杂动画的设计公司的大量JavaScript网站，并且只有一页。这些站点使用加载消息来等待加载所有脚本/ html/css，以便页面按预期运行。
1
虽然我同意其他人不应该要它，但我只是简单地解释一下你可以做些什么来做一个小小的改变，而不是一路走下去，实际上阻止已经存在的内容 - 也许这个将足以让您和您的访客保持愉快。
浏览器开始加载一个网页，后来将处理外部位于CSS和JS，特别是如果CSS/JS链接到的地方是在“正确”的地方。 （我认为建议是尽可能晚的加载js，并使用外部的css来加载标题）。现在，如果你有你的CSS和/或你想尽快地应用于JS的一些部分简单地包含在页面本身。这将违背YSlow等性能工具的建议，但它可能会增加显示的页面变化，就像您希望显示的那样。只有在真正需要时才使用它！
9
当然是有这个有效的使用。一种是防止人们点击链接/导致JavaScript事件发生，直到所有的页面元素和JavaScript已经加载。
在IE，您可以使用页面过渡这意味着页面不显示，直到它完全加载：
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />
注意持续时间短。这足以确保页面在完全加载之前不会显示。
在火狐和其他浏览器，我使用的解决方案是创建一个DIV是页面和白色的大小，然后在把JavaScript中隐藏在页面的最末端。另一种方法是使用jQuery并隐藏它。不像IE解决方案那样无痛苦，但都工作得很好。
+0
对于Firefox解决方案：禁用JavaScript的用户呢？ – ChristopheD 2009-09-16 19:57:39
+5
@ChristopheD答案：那些关闭javascript的世界上的10个人将无法看到该页面。 – bagofmilk 2013-10-11 14:44:14
+0
@ChristopheD似乎很多东西都依赖于JS，所以[至少对于我的网站]它无法正常工作。 – 2014-02-15 21:50:09
26
这是对所有的给出的理由，多一个非常糟糕的主意。这就是说，这里是它的使用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，他们从来没有看到的网页。如果页面从未完成加载，他们将永远不会看到该页面。如果页面加载时间过长，他们可能会认为出现了问题，然后转到其他地方而不是*请等待... *。
+8
解决这个解决方案的no javascript问题的一种方法是使用'
4
此外，请确保服务器缓冲页面，并且不要立即（建设中）将其流到客户端浏览器。
既然你没有指定你的技术堆栈：
- PHP：看看ob_start
- ASP.NET：确保响应。BufferOutput = TRUE（这是默认设置）
+0
一个服务器端的方法！优秀！谢谢！ – BeachRunnerFred 2009-09-16 19:57:14
+0
请注意，虽然这将有助于发送巨大的动态构建的html页面，但这对于“外部”链接的图像和脚本/样式表不起作用（但这些将在第一页加载之后在浏览器缓存中） – ChristopheD 2009-09-16 20:01:34
9
下面是使用jQuery的解决方案：
<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
$('#container').css('opacity', 1);
});
</script>
我把这个脚本只是我</body>标记之后。只需将“#container”替换为要隐藏的DOM元素的选择器即可。我尝试了几个变体（包括.hide()/.show()和.fadeOut()/.fadeIn()），只是设置不透明度似乎有最少的不良影响（闪烁，改变页面高度等）。您也可以用fadeTo(100, 1)代替css('opacity', 0)以获得更平滑的过渡。 （不，fadeIn()将不会工作，至少不会在jQuery 1.3.2下工作。）
现在的注意事项：我实现了上述，因为我使用的是TypeKit，当刷新页面和字体时会出现烦人的闪烁需要几百毫秒才能加载。所以我不想在TypeKit加载之前在屏幕上出现任何文本。但是，如果您使用上面的代码并且页面上的某些内容无法加载，那么显然您遇到了麻烦。有两个明显的方式，它可以改进：
- 最大时间限制（比如，1秒）之后，一切都将出现在页面是否加载与否
- 某种类型的负荷指标（比如，东西from http://www.ajaxload.info/）
我不会在这里实施加载指示器，但时间限制很容易。只需将其添加到上面的脚本中：
$(document).ready(function() {
setTimeout('$("#container").css("opacity", 1)', 1000);
});
所以现在，最坏的情况下，您的页面将需要多出一秒。
+0
除了方法我刚刚发布了一个答案来处理禁用JavaScript和推迟CSS加载。谢谢Trevor。 – RafaSashi 2015-02-19 09:47:24
3
紧随你的< body>标签中添加这样的事情...
<style> body {opacity:0;}</style>
并为您的<头的第一件事>添加类似...
<script>
window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
</script>
由于这是好的做法还是坏的取决于你的访问者，以及等待的时间。
这个问题仍然存在，我没有看到任何答案是如何确保页面已经稳定。例如，如果您要加载字体，则页面可能会重新排列一点，直到加载并显示所有字体。我想知道是否有事件告诉我该页面已完成渲染。
0
我知道这是一个古老的线程，但仍然。另一个简单的选择是这个库：http://gayadesign.com/scripts/queryLoader2/
0
不要使用显示：无。如果你这样做，当你做show（）时你会看到图像的大小调整/重新定位。使用可见性：隐藏，而不是正确放置所有东西，但它只是直到你告诉它才会显示。
2
除了特雷弗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);
});
资源
1
在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文件。
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>
+1
请描述此代码如何可能有所帮助。 – 2017-07-30 07:55:28
相关问题
- 1. Java SWT浏览器：等待动态页面完全加载
- 2. 如何让Selenium在执行click（）命令之前等待页面完全加载
- 3. 在页面完全加载之前显示加载图像
- 4. 在向浏览器发送响应之前，Varnish等待整个页面加载
- 5. Webkit.Net等待要完全加载页面
- 6. 在页面加载时，如何让我的浏览器全屏？
- 7. 在显示之前完全加载新页面
- 8. 如何等待页面加载完成？
- 9. 如何在Automation Anywhere中完全加载网页之前添加等待/延迟？
- 10. 等待图像加载之前显示
- 11. 等待一切加载之前显示
- 12. C＃如何在继续之前等待网页完成加载
- 13. C＃WPF：等待网页浏览器加载页面
- 14. 如何在页面完全加载之前让量角器检查元素？
- 15. Chrome浏览器和IE浏览器不会等待页面加载之前采取屏幕截图
- 16. 如何在iframe完全加载之前显示加载图标？
- 17. 如何在继续执行脚本之前等待网页完全加载？
- 18. C＃让程序等待，直到浏览器完成加载网页
- 19. 机器人：如何在继续之前等待加载完成？
- 20. WPF在应用程序完全加载之前显示等待游标
- 21. C＃Webclient.DownloadString（） - 如何等待页面下载之前加载？
- 22. 如何让Selenium WebDriver不要等待页面的完整加载
- 23. 如何在获取元素之前等待页面加载？
- 24. 使页面加载时使谷歌浏览器全屏显示
- 25. 如何在DotNetBrowser打印之前等待淘汰页面完成加载？
- 26. 为什么浏览器等待结束加载页面？
- 27. 如何显示等待gif，直到图像完全加载
- 28. 在显示页面之前完全下载图片
- 29. 在模板渲染之前等待Meteor.user（）完全加载
- 30. 在Python中强制Selenium以等待浏览器完成加载
我不喜欢怎样，直到一切都被加载某些页面不显示任何东西。不要错误地认为用户的想法和你一样。 – 2009-09-16 19:34:06
Facebook做到了这一点，它只是让我生气。 – 2009-09-16 19:36:29
如果你这样做，至少确保你立即显示一条消息说网页正在加载.. – 2009-09-16 19:37:22