关于javascript：如何使浏览器等待显示页面，直到它完全加载？


How can I make the browser wait to display the page until it's fully loaded?

我讨厌你如何实际看到网页加载。 我认为等待页面完全加载并准备好显示(包括所有脚本和图像)然后让浏览器显示它会更有吸引力。 所以我有两个问题......

  • 我怎样才能做到这一点？
  • 我是网络开发的总菜鸟，但这是常见做法吗？ 如果没有，为什么？

    • 提前感谢您的智慧！

    相关讨论

    对于给出的所有原因，这是一个非常糟糕的主意，甚至更多。也就是说，这是你如何使用jQuery做到的：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <body>

    <!-- you can set whatever style you want on this -->
    Loading, please wait...


    <!-- everything else -->

    <script type="text/javascript">
    $(document).ready(function() {
        $('#body').show();
        $('#msg').hide();
    });

    </body>

    如果用户禁用了JavaScript，则他们永远不会看到该页面。如果页面永远不会完成加载，他们永远不会看到页面。如果页面加载时间太长，他们可能会假设出现问题而只是去其他地方而不是*请等待...... * ing。

    相关讨论

    我认为这是一个非常糟糕的主意。用户喜欢看到进步，简单明了。将页面保持在一个状态几秒钟，然后立即显示加载的页面将使用户感觉没有任何事情发生，您可能会失去访问。

    一个选项是在后台处理内容时显示页面上的加载状态，但这通常是在网站实际处理用户输入时保留的。

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

    最重要的是，你至少需要在页面加载时显示一些视觉活动，而且我认为一次加载一小部分页面并不是那么糟糕(假设你没有做一些严重减慢页面的事情)加载时间)。

    相关讨论

    肯定有一个有效的用途。一种是阻止人们点击链接/导致JavaScript事件发生，直到加载了所有页面元素和JavaScript。

    在IE中，您可以使用页面转换，这意味着页面在完全加载之前不会显示：

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

    注意持续时间短。这足以确保页面在完全加载之前不会显示。

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

    相关讨论

    这是使用jQuery的解决方案：

    1
    2
    3
    4
    5
    <script type="text/javascript">
    $('#container').css('opacity', 0);
    $(window).load(function() {
      $('#container').css('opacity', 1);
    });

    我把这个脚本放在我的标签之后。只需将"#container"替换为要隐藏的DOM元素的选择器即可。我尝试了几种变体(包括.hide() / .show()和.fadeOut() / .fadeIn())，只是设置不透明度似乎有最少的不良影响(闪烁，改变页面高度等)。您还可以将css('opacity', 0)替换为fadeTo(100, 1)以实现更平滑的过渡。 (不，fadeIn()不起作用，至少不在jQuery 1.3.2下。)

    现在注意事项：我实现了上面的原因，因为我正在使用TypeKit，当你刷新页面并且字体需要几百毫秒才能加载时会出现恼人的闪烁。因此，在TypeKit加载之前，我不希望任何文本出现在屏幕上。但是，如果您使用上面的代码并且页面上的某些内容无法加载，那么显然您遇到了大麻烦。有两种明显的方法可以改进：

  • 最大时间限制(例如，1秒)，无论页面是否加载，都会显示所有内容
  • 某种加载指示器(比如来自http://www.ajaxload.info/的东西)

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

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

    所以现在，在最糟糕的情况下，您的页面将需要额外的秒才能显示。

    立即关注标签，添加类似这样的内容......

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

    而对于中的第一件事，添加类似......

    1
      window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};

    只要这是好的做法或坏的取决于您的访客，以及等待的时间。

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

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

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

    • PHP：查看ob_start
    • ASP.NET：确保Response.BufferOutput = True(默认情况下)
    相关讨论

    虽然这并不总是一个好主意，但您可以自由决定是否真的想这样做。有一些不同的方法，我在这里找到一个简单的例子：

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

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

    您可以使用某些css隐藏所有内容：

    1
    2
    3
    4
    #some_div
    {
      display: none;
    }

    然后在javascript中为document.onload分配一个函数来删除该div。

    jQuery使这样的事情变得非常简单。

    相关讨论

    强制性的："使用jQuery"

    我已经看到了一个页面，它将黑色或白色div放在页面顶部，然后在document.load事件中将其删除。或者你可以在jQuery中使用.ready这就是说，它是我见过的最烦人的网页之一，我会反对它。

    除了Trevor Burnham的回答，如果你想处理禁用的javascript和推迟css加载

    HTML5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html class="no-js">

        <head>...</head>

        <body>

            <header>...</header>

            <main>...</main>

            <footer>...</footer>

        </body>

    </html>

    CSS

    1
    2
    3
    4
    5
    6
    7
    //at the beginning of the page

        .js main, .js footer{

            opacity:0;

        }

    JAVASCRIPT

    1
    2
    3
    4
    5
    6
    7
    8
    //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

    1
    2
    3
    4
    5
    6
    7
    8
    //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？

    • 如何在JavaScript中添加/删除类？

    在PHP-Fusion开源CMS，http：//www.php-fusion.co.uk，我们这样做的核心 -

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        <?php
            ob_start();
            // Your PHP codes here            
            ?>
            YOUR HTML HERE


            <?php
            $html_output = ob_get_contents();
            ob_end_clean();
            echo $html_output;
        ?>

    你将无法看到任何一个一个装载的东西。唯一的加载器将是您的浏览器选项卡微调器，它只是在加载所有内容后立即显示所有内容。试试看。

    此方法完全符合html文件。

    虽然我同意其他人的意见，你不应该想要它，但我只是简单地解释一下你可以做些什么来做出一点点差异，而不是一路走来，实际上阻止已经存在的内容 - 也许这足以保持两者你和你的访客很开心。

    浏览器开始加载页面，稍后将处理外部定位的css和js，特别是如果css / js链接的位置在"正确"的位置。 (我认为建议是尽可能晚地加载js，并使用你在头文件中加载的外部css)。现在，如果您希望尽快应用css和/或js的某些部分，只需将其包含在页面本身中即可。这将违背YSlow等性能工具的建议，但它可能会增加您希望显示的页面更改。只在真正需要时才使用它！

    我知道这是一个老线程，但仍然。另一个简单的选择是这个库：http：//gayadesign.com/scripts/queryLoader2/

    不要使用display：none。如果这样做，当您执行show()时，您将看到图像调整大小/重新定位。使用visibility：hidden而不是它会正确地放置所有内容，但只有在你告诉它之后它才会被看到。

    希望这段代码能有所帮助

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     <html>  
        <head>
            <style type="text/css">
              .js #flash {display: none;}
            </style>
            <script type="text/javascript">
              document.documentElement.className = 'js';
           
          </head>
          <body>
            <!-- the rest of your code goes here -->

            <script type="text/javascript" src="/scripts/jquery.js">
            <script type="text/javascript">
              // Stuff to do as soon as the body finishes loading.
              // No need for $(document).ready() here.
           
          </body>
        </html>
    相关讨论

    您可以首先让您网站的主索引页面只包含一条"正在加载"的消息。从这里你可以使用ajax获取下一页的内容并将其嵌入到当前页面中，完成后删除"正在加载"消息。

    您可以在页面顶部包含一个100％宽度/高度的加载消息容器，然后在加载完成时删除所述div。

    后者在两种情况下都可能无法正常工作，并且取决于浏览器如何呈现内容。

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