Fatal编程技术网
  • javascript/
  • Javascript 是否有一种规范的方式来呈现“一个；“装载”；用于缓慢加载网页的弹出窗口？

Javascript 是否有一种规范的方式来呈现“一个；“装载”；用于缓慢加载网页的弹出窗口？

javascript user-interface

Javascript 是否有一种规范的方式来呈现“一个；“装载”；用于缓慢加载网页的弹出窗口？,javascript,user-interface,dom-events,Javascript,User Interface,Dom Events,前言： 我有一个web应用程序，它的工作方式很简单： 用户单击第1页上的按钮。这将提交第2页的POST请求 第2页在后端检索数据需要1-2分钟 第2页后端将计算出的HTML发送到浏览器，在浏览器中渲染需要一段时间（10-30秒） 这里明显的可用性问题是，当用户单击步骤1中的按钮时，必须坐在那里，而网页似乎什么也不做（浏览器显示它正在连接状态栏上的第2页，但大多数用户没有注意到这一点）；然后，它用一个空页面替换页面#1的内容，该页面似乎什么也不做，而内容正在呈现，DOM是从一个大数据集构建的 我不

前言：

我有一个web应用程序，它的工作方式很简单：

  • 用户单击第1页上的按钮。这将提交第2页的POST请求

  • 第2页在后端检索数据需要1-2分钟

  • 第2页后端将计算出的HTML发送到浏览器，在浏览器中渲染需要一段时间（10-30秒）

    • 这里明显的可用性问题是，当用户单击步骤1中的按钮时，必须坐在那里，而网页似乎什么也不做（浏览器显示它正在连接状态栏上的第2页，但大多数用户没有注意到这一点）；然后，它用一个空页面替换页面#1的内容，该页面似乎什么也不做，而内容正在呈现，DOM是从一个大数据集构建的

    我不考虑这样一个事实，即上面的解决方案是经过精心设计的，需要适当地重新设计：（1）使用AJAX检索数据；和/或（2）检索较小（人类可消费）块中的数据，并根据需要增量加载更多数据。由于资源限制，没有这样的重新设计，我正在尝试应用一个快速而肮脏的可用性修复程序，其性质如下：

    A.单击第1页上的按钮后，用户将看到一个模式弹出窗口，显示“处理和重新加载数据。这可能需要约3分钟才能完成”

    B.重要的是，在第2页加载开始时，模式弹出窗口应保持不变（或至少无需重新创建）

    问题：

    构建这种模式弹出窗口的“最佳实践”方法是什么？

    显然，#A单独实现是微不足道的（第1页上的弹出窗口将一直保持到第2页的HTTP响应到达客户端，第2页开始呈现第1页）

    但是，当第2页到达时，保存/重新克隆此弹出窗口的最佳方法是什么？这里的两个问题是尽可能实现从HTTP响应之前的弹出窗口和之后的弹出窗口的无缝转换；更重要的是，避免等待整个页面2呈现（在显示弹出窗口之前等待30秒）

    澄清：

    • 任何建议的方法都不应该是AJAX。例如，任何正在执行的操作都必须包含在与第2页的HTTP响应发送的HTML内容相同的HTML内容中

    • 我在寻找一般的技术指南，不一定是示例代码。按照“使用
      window.onload
      handler”的顺序（显然答案是错误的）

      • < L> > P>理想的是使用纯JavaScript，但是如果存在使用jQuery或YUI的<强>更好/ <强>解决方案，我会考虑。

      所以这实际上是一个非常简单的修复。查看一些示例覆盖代码

      当页面准备就绪时，只需进行以下调用（如果使用jQuery）：

      基本上，默认情况下，您的覆盖将在那里，任何加载在下面的内容都将被隐藏。一旦所有内容都加载完毕，只需淡出覆盖层即可完成！您不需要任何特殊的脚本或任何东西，只需在默认情况下打开覆盖，并在准备就绪时将其关闭即可

      如果您想开始将其用于AJAX，在进行AJAX调用之前，只需调用
      $（'.overlay'）.fadeIn（）在覆盖层内更改文本也非常容易。只要找到节点
      

      $('.overlay').find('.message p').text('Some new text').end().fadeIn();

      

      如果您只想使用标准JS，可以按照您的建议将函数附加到
      window.onload
      ，但这只检测页面何时准备就绪，而不是像jQuery的
      .ready（）
      那样检测DOM。
      根据我从您的论文问题中了解到的情况（这是一堆需要诚实阅读的内容）
      

        

      • 我假设您的页面请求只是正常的“单击此链接并加载非常慢的页面”
        • 

      • 你想表明它正在加载非常慢的东西
        • 

      • 在第2页显示指示器，然后再显示10秒以上
        • 

      
嗯，你应该尽早加载第2页的模式。在头部加载库和脚本。由于解析通常是自上而下的，因此模式应该在慢速内容之前，以便对其进行解析并使其可用于脚本
      
利用jQuery的
      $（document.ready（）
      ，它在DOM就绪时立即执行，而不是
      窗口.onload，它在呈现所有内容（DOM、图像和所有内容）时执行
      

      
$（函数（）{//尽快执行对话框
$（'#modal'）.dialog（）；//模态div可用
});

      明智的做法是使用js添加覆盖（或者使用modernizer并为
      html.no-js.overlay{display:none}添加样式）
      。否则，没有js或js错误意味着你会得到一个无法摆脱的覆盖。是的，这是个好主意。但说实话，现在很少有人不使用js。这是百分之一的分数。有超过百分之一的网站有js错误：），或逻辑错误，例如，将覆盖删除添加到ajax成功处理程序中，并且没有错误处理程序（这是肯定的；）但是，如果您正在编写正确的错误处理代码，您应该能够处理这个问题，对吗？作为一个规范化的泛化：Big if:D

      $('.overlay').find('.message p').text('Some new text').end().fadeIn();

      

      <script src="jquery.js"></script> <!--libraries like jquery-->
<script>
    $(function(){             //execute dialog as soon as 
        $('#modal').dialog(); //the modal div is available
    });
</script>
<body>
    <div id="modal"></div>
    <!--the rest of the slow rendering page-->
</div>