Fatal编程技术网
  • jquery/
  • Jquery 浏览器何时开始呈现部分传输的HTML？

Jquery 浏览器何时开始呈现部分传输的HTML？

jquery html browser

Jquery 浏览器何时开始呈现部分传输的HTML？,jquery,html,browser,spinner,flush,Jquery,Html,Browser,Spinner,Flush,我有一个长时间运行的报告，希望在它生成时向用户显示一个等待微调器。我已经做了这项工作，但不确定我做得最好或正确的方式 这是使用ColdFusion，但我想它可以是任何语言。在页面顶部，我有一些Javascript（jQuery），它显示了一个等待微调器，另外还有一个documentReady处理程序，我可以在其中取下微调器。我刷新输出（如果有必要的话），然后剩下的代码处理报告内容。这并没有呈现微调器，我的理论是，即使我在服务器上刷新东西，一些缓冲也在进行中，浏览器直到太晚才看到微调器代码。所以，

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

这是使用ColdFusion，但我想它可以是任何语言。在页面顶部，我有一些Javascript（jQuery），它显示了一个等待微调器，另外还有一个documentReady处理程序，我可以在其中取下微调器。我刷新输出（如果有必要的话），然后剩下的代码处理报告内容。这并没有呈现微调器，我的理论是，即使我在服务器上刷新东西，一些缓冲也在进行中，浏览器直到太晚才看到微调器代码。所以，我在刷新之前添加了一个循环，它会弹出几百行HTML注释。在微调了行数之后，这就成功了。我想其他网站也是这样做的

但是：今天，当看到我的另一个页面逐行显示一个长期运行作业的状态时，我突然想到，该页面在每一行之后都会刷新，并且浏览器会根据需要以增量方式呈现该页面。这与我上面的结论不符，现在我不知道规则是什么。有没有一种可预测的方法可以做到这一点？每个浏览器有不同吗

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

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

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

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

我无法想象这太难实现；即使是寒冷的天气。启动ajax请求时启动微调器，调用回调时停止微调器。

---发布澄清答案---

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

你重申的问题的答案是“不”。在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>


//我们还没准备好。这将失败。
$（“.placeholder”）.hide（）；
$（文档）.ready（函数（）{
//这不会失败的
$（“#一”）.hide（）；
});
占位符一
占位符二
一开始可能会出现
$（“#one”）.hide（）是多余的，但这不是真的<代码>$（“.placeholder”）.hide（）是在jQuery准备就绪之前调用的，因此它没有效果，这就是为什么如果在web浏览器中运行上面的标记，将显示“占位符2”（而不是“占位符1”）

既然我们已经解决了这个问题，那么更大问题的解决方案（“正确的方法”）就是AJAX


  • 加载包含微调器代码的基本页。确保加载微调器的代码作为
    $（document.ready（）
    的一部分运行
    • 

  • 用于获取所需的报告
    • 

  • 当它返回时，隐藏微调器，将报告注入到您的基本页面中
    • 

    祝你好运
     如果我理解正确，您希望在页面仍在加载内容时显示“加载”图像
    
我所做的，也是我认为最好的方法是在页面顶部添加一个div标记，它最靠近保存加载图像/文本的body标记。你可以在css的帮助下把这个div放在其他地方
    
然后让Jquery在页面加载时删除这个div。不要使用$（文档）。准备就绪正如一些人建议的那样，我将使用$（窗口）。加载，因为它在整个页面（包括所有帧、对象和图像）完全加载时被激活。
    
Se链接这里
    
示例
    

    <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>
[...]

    

    
$（窗口）.load（函数（）{$（“#加载”）.remove（）；}）；
[...]

    

    …除了内置的dela之外