7

我有一个长期运行的报告，并希望在生成时向用户显示等待微调器。我已经完成了这项工作，但不确定我是否以最好或正确的方式做这件事。

这是使用 ColdFusion，但我猜它可能是任何语言。在页面的顶部，我有一些显示等待微调器的 Javascript (jQuery)，还有一个 documentReady 处理程序，我可以在其中取下微调器。我刷新输出（如果重要的话），然后其余代码处理报告内容。这从来没有渲染微调器，我推测，即使我在服务器上刷新东西，也会发生一些缓冲，直到为时已晚，浏览器才看到微调器代码。所以，我在刷新之前添加了一个循环，吐出几百行 HTML 注释。在微调了行数之后，就成功了。我当时认为其他网站也是如此。

但是：今天，当我看到我的另一个页面逐行吐出长时间运行的作业的状态时，我突然想到，该页面在每一行之后刷新，并且浏览器根据需要逐步呈现。这与我上面的结论不符，现在我不知道规则是什么。有没有可预测的方法来做到这一点？是否因浏览器而异？

澄清：我很欣赏试图解释执行等待微调器的正确方法的答案，但我只是使用等待微调器作为示例来说明我的真正问题：是否有可靠的方法来预测浏览器何时开始呈现HTML 因为它通过网络流式传输给他们？通过观察很明显，浏览器不会等待 /html 标签开始工作。这个问题不一定与 Javascript 有任何关系。例如，我描述的显示状态的第二页是纯 HTML。

4

4 回答 4

2

如果我理解正确，您希望在页面仍在加载内容时显示“加载”图像。

我所做的，我认为最好的方法是在页面顶部添加一个 div-tag，最接近包含加载图像/文本的 body-tag。您可以借助一些 css 将此 div 放置在其他地方。

然后让 Jquery 在页面加载时删除这个 div。我不会像某些人推荐的那样使用$(document).ready ，而是使用$(window).load，因为它在整个页面完全加载时被激活，包括所有框架、对象和图像。
此处链接；http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

例子; 

<body>    
<div id="loading" style="z-index:200; width:100%; height:40px; border-top:2px #D4D4D4 solid;  background:#E8E8E8; color:#000; position:fixed; bottom:0; left:0;">
    <div align="center">
        <img src="load.gif" alt="Loading...">
    </div>
</div>
<script type="text/javascript">
    $(window).load(function() { $("#loading").remove(); });
</script>
[...]

...

于 2010-02-05T09:22:52.607 回答
2

除了 Firefox 的内置延迟之外，还有其他区域会导致浏览器在渲染前等待。

当一个 html 页面被发送到浏览器时，它首先必须决定事情的去向，然后才能绘制屏幕。例如，表格因导致渲染延迟而臭名昭著。为了绘制表格，浏览器需要计算列大小。如果您使用百分比作为列宽或根本不指定它们，则浏览器必须在呈现之前获取整个表格。

但是，如果您使用类似table-layout: fixed;css 属性的东西，那么浏览器可以只读取第一行并在数据输入时开始绘制。

其他标签可能会导致类似的问题。基本上任何时候浏览器都必须计算内容的大小，然后它必须要呈现所有的内容。如果您可以通过使用固定大小（宽度/高度）的元素提前给它提示，那么浏览器不需要弄清楚任何事情，它可以在下载元素时绘制它们。

作为一个自我强加的规则，我从不让浏览器决定任何事情。相反，我给我的元素固定大小。因此，我工作的网站通常具有闪电般的快速渲染。

于 2010-02-08T05:49:19.890 回答
1

--- 澄清后的回答 ---

我的原始答案应该对某人有用（我希望），但这不是对问题的直接回应，所以我会发布另一个答案

您重申的问题的答案是“不”。在 FF 的情况下，有一个预定义的初始渲染延迟，但其他浏览器会有所不同。FF 渲染延迟也可以调整。

以 FF 为例，最初的 250 毫秒是 FF 在尝试第一次渲染之前找出至少一些有用信息的时间。然后它会随着了解的更多而定期进行额外的渲染。

您无法确定浏览器何时开始呈现 HTML 文档。

--- 原始答案 ---

为了直接回答您的问题，我相信 Firefox 在对收到的第一个数据采取行动之前会等待 250 毫秒，但这可以更改。对于其他浏览器，我不知道。

但是，您不想走那条路。

当 jQuery 准备好发挥它的魔力时，它会通过触发来通知你$(document).ready()。在此之前，任何使用 jQuery 的尝试都会失败。换句话说，您的微调器没有出现，因为 jQuery 还没有准备好处理该请求。

考虑以下示例，其中两个占位符显示在屏幕上，我们将使用 jQuery 隐藏它们。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <script>

            // We're not ready yet.  This will fail.
            $(".placeholder").hide();

            $(document).ready(function(){
                // This won't fail
                $("#one").hide();
            });

        </script>
    </head>
    <body>
        <div id="one" class="placeholder">Placeholder One</div>
        <div id="two" class="placeholder">Placeholder Two</div>
    </body>
</html>

起初可能看起来$("#one").hide();是多余的，但事实并非如此。 $(".placeholder").hide();在 jQuery 准备好之前调用，所以它没有任何效果，这就是为什么如果你在 web 浏览器中运行上面的标记，你会看到显示“占位符二”（而不是“占位符一”）。

现在我们已经解决了这个问题，更大的问题（“正确的方法”）的解决方案是 AJAX。

  1. 加载包含微调器代码的基本页面。确保加载微调器的代码作为$(document).ready().
  2. 使用jQuery 的 AJAX 功能来获取您想要的报告。
  3. 当它回来时，隐藏微调器，将报告注入您的基本页面。

祝你好运！

于 2010-02-05T07:13:19.497 回答
0

我希望它会因浏览器而异：有些会在页面完全接收之前开始呈现；其他人将在开始之前等待整个 html 文件。

我注意到 HTTP 响应规范提供了一个“206 Partial Content”标头，这可能为值得研究的跨浏览器解决方案带来一些希望。

几乎可以肯定有很多方法可以削减它，但我的直接想法是交付存根页面，然后使用 ajax 按需拉取和呈现片段。例如，许多大网站最初似乎提供了一个最小视图，然后如果您向下滚动足够多，它会触发一个 ajax 请求以检索更多数据并将其附加到页面。例如：脸书、斜线点。

我无法想象这太难实现了。即使是冷聚变。在触发 ajax 请求时启动微调器，并在调用回调时停止它。

于 2010-02-05T00:32:58.910 回答