如何让浏览器等待页面完全显示之前显示它？

78

我讨厌你怎么能真正看到网页加载。我认为等待页面完全加载并准备好显示（包括所有脚本和图像），然后让浏览器显示它会更具吸引力。所以我有两个问题...

  1. 我怎样才能做到这一点？
  2. 我对Web开发一无所知，但这是常见的做法吗？如果没有，为什么？

在此先感谢您的智慧！

javascript  css  web 
— 海滩奔跑者弗雷德
source
48
我不喜欢某些页面在加载所有内容之前什么都不显示。不要误以为用户以与您相同的方式思考。
— FredrikMörk2009年
8
Facebook做到了，这让我很生气。
— Josh Stodola
8
如果你这样做，至少确保你显示一个消息，马上说了页面加载..
— 托尔豪根
6
您说不想看到页面加载。有时-如果内容在加载时跳来跳去，我也会这样做。您可以通过为图像设置显式大小来最小化此问题，以便浏览器知道为图像留出多大的空间，并且在加载图像时不必移动文本来容纳它们。
— 内森·朗2009年
但以我为例，每次更改页面时，导航栏都会重新加载组成该图像的图像，并且在单击链接时每隔几秒钟重新构建页面时，导航栏看起来很糟糕。
— tkbx

Answers:

34

出于所有给出的原因，这是一个非常糟糕的主意，甚至更多。就是说，这是使用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，则他们将永远看不到该页面。如果该页面从未完成加载，则他们将永远看不到该页面。如果页面加载时间太长，他们可能会认为出了点问题，只是去别的地方，而不是*请稍候... *。

— 格兰特·瓦格纳
source
11
解决该解决方案没有javascript问题的一种方法是利用<noscript>标签“撤消”display:none效果。
— 克里斯·汤普森
21

我认为这是一个非常糟糕的主意。用户喜欢简单明了地查看进度。将页面保持在一种状态几秒钟，然后立即显示已加载的页面，将使用户感觉好像什么都没有发生，并且您很可能会失去访问权限。

一种选择是在后台进行填充处理时在页面上显示加载状态，但这通常保留给站点在实际使用用户输入进行处理时使用。

http://www.webdeveloper.com/forum/showthread.php?t=180958

最重要的是，您至少需要在页面加载时显示一些视觉活动，而且我认为一次将页面分成几小块并不是一件很糟糕的事情（假设您没有做会严重降低页面速度的事情）加载时间）。

— 罗伯特·格雷纳
source
1
我设计了一个网站，该网站在加载重物时使用轻型微调器-将重物设置为display: none。加载完所有内容后，微调框将逐渐消失，内容也会逐渐淡入。由于微调框现在被普遍理解为“正在加载，请稍候”，因此效果很好。注意：它使用jQuery。
— ADTC
1
我认为这样概括是不公平的。如果您要构建一个真正快速且活泼的网站，那么浏览器决定通过显示未完成的渲染网站的几帧来破坏体验，这真是令人讨厌。我认为我们应该努力争取更好的网站和更好的用户体验。我并不是说此修复程序是很好的修复程序，我宁愿让浏览器等到完成处理。然后由网站来确保其粪便得到最佳化和快速加载。我们不应该构建系统，以便程序员可以摆脱懒惰和不良行为。
— BjarkeCK
13

这是使用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. 一个最大时间限制（例如1秒），之后无论是否加载页面，所有内容都会显示
  2. 某种加载指示符（例如，来自http://www.ajaxload.info/的内容）

我不会在这里实施加载指示器，但是时间限制很容易。只需将其添加到上面的脚本中：

$(document).ready(function() {
  setTimeout('$("#container").css("opacity", 1)', 1000);
});

因此，现在，在最坏的情况下，您的页面将需要多一秒钟的时间才能显示出来。

— 特雷弗·伯纳姆
source
10

肯定有一个有效的用法。一种是防止人们单击链接/导致JavaScript事件在加载所有页面元素和JavaScript之前发生。

在IE中，您可以使用页面转换，这意味着直到完全加载页面才显示：

<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />

注意持续时间短。仅需确保页面在完全加载之前不显示即可。

在FireFox和其他浏览器中，我使用的解决方案是创建一个DIV，该DIV是页面大小和白色，然后在页面的最后放入JavaScript隐藏它。另一种方法是使用jQuery并隐藏它。不像IE解决方案那样轻松，但是两者都可以很好地工作。

— 基思·阿德勒
source
对于Firefox解决方案：禁用JavaScript的用户如何？
— ChristopheD
6
@ChristopheD回答：世界上关闭javascript的那10个人将无法看到该页面。
— bagofmilk 2013年
1
@ChristopheD似乎很多东西都依赖于JS，所以[至少对于我的网站而言]它仍然无法正常运行。
— 匿名企鹅2014年
5

在您的<body>标签之后，立即添加如下内容...

 <style> body  {opacity:0;}</style>

在<head>的第一件事中添加以下内容：

 <script>
  window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
 </script>

无论是好的做法还是坏的做法，都取决于您的访客以及等待所花费的时间。

仍然悬而未决的问题是，如何确保页面稳定，我在这里看不到任何答案。例如，如果您要加载字体，则页面可能会稍微重新排列，直到加载并显示所有字体。我想知道是否有一个事件告诉我页面已完成渲染。

— 特里·里格尔
source
4

还要确保服务器缓冲页面，并且不会立即（在构建时）将页面流式传输到客户端浏览器。

由于您尚未指定技术堆栈：

  • PHP：研究ob_start
  • ASP.NET：确保Response.BufferOutput = True（默认情况下）
— 克里斯多夫
source
2
请注意，尽管这在发送巨大的动态构建的html页面时会有所帮助，但不适用于“外部”链接的图像和脚本/样式表（但无论如何，这些图像和脚本/样式表仍将在第一页加载后出现在浏览器缓存中）
— ChristopheD
3

必填：“使用jQuery”

我见过在页面上放置黑色或白色div的页面，该页面覆盖了页面顶部的所有内容，然后在document.load事件中将其删除。或者您可以在jQuery中使用.ready话虽如此，这是我见过的最讨厌的网页之一，我建议您不要这样做。

— 尼尔·N
source
3

您可以使用一些CSS隐藏所有内容：

#some_div
{
  display: none;
}

然后在javascript中将一个函数分配给document.onload以删除该div。

jQuery使这种事情变得非常容易。

— 唯一的那个
source
7
当然，如果用户没有javascript，他们将永远不会看到您的页面。
— 内森·朗2009年
3

尽管这并不总是一个好主意，但是您可以自由决定是否真的要这样做。有几种不同的方法可以做到，我在这里找到了一个简单的例子：

http://www.reconn.us/content/view/37/47/

可能不是最好的解决方案，但是它应该可以帮助您开发自己的解决方案。祝好运。

— 保罗·古德斯
source
3

在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文件完全兼容。

— 偏差
source
2

除了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);

        });

资源

— 拉法萨希
source
1

尽管我同意其他人不希望的观点，但我只简要解释一下您可以做些什么，而不必一路走来并实际阻止已经存在的内容，可能会-也许这足以保持两者您和您的访客高兴。

浏览器开始加载页面，稍后将处理位于外部的css和js，尤其是如果css / js链接的位置位于“正确”的位置。（我认为建议是尽可能晚地加载js，并使用您在标头中加载的外部CSS）。现在，如果您希望将css和/或js的某些部分尽快应用，只需将其包含在页面本身中即可。这将与诸如YSlow之类的性能工具的建议背道而驰，但可能会增加页面显示的更改，就像您希望其显示一样。仅在真正需要时使用此功能！

— 西蒙·格罗内沃尔特
source
0

您可以从让站点的主索引页面仅包含一条消息“正在加载”开始。在这里，您可以使用ajax来获取下一页的内容并将其嵌入到当前页面中，完成后删除“ Loading”消息。

您可能只需要在页面顶部添加一个加载消息容器（宽度/高度为100％），然后在加载完成时删除所述div就可以摆脱困境。

后者可能无法在两种情况下都完美运行，并且将取决于浏览器呈现内容的方式。

我不确定这是否是个好主意。对于简单的静态网站，我不会。但是，最近我从设计公司那里看到了很多笨拙的javascript网站，这些网站使用的是复杂的动画，并且只有一页。这些站点使用加载消息来等待所有脚本/ html / css加载，以便页面按预期运行。

0

不要使用display：none。如果这样做，则在执行show（）时将看到图像的大小调整/重新定位。改为使用visible：hidden，它将正确地布置所有内容，但是直到您告诉它时它才可见。

— bot
source
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>
— 先生。羡慕
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.