如何在服务器响应之前显示进度指示器？

Question

我有一个应用程序，其中页面加载大约需要1分钟。这是一个包含大量计算和其他内容的大页面。

我想显示进度指示器，直到服务器给我回复。有没有人对此有任何想法？

Answer 1

您需要显示加载程序，ajax加载内容以及Ajax请求完成时隐藏加载程序并显示内容或只是用新数据替换加载程序。

一个天真的实现可能看起来像这样，并会用url / newcontent返回的内容替换#content的内容。

<div id="content">
 <img src="/path/to/loader.gif" />
</div>

<script>
 $("#content").load("/newcontent");
</script>

或者在您的情况下，您实际上想要替换整个页面替换整个正文内容：

$('body').load('newpage.html');

Answer 2

如果在服务器上创建页面的HTML需要很长时间，那么就无法显示带有加载消息/进度指示器的页面，然后显示内容。

我能想到的唯一方法是只使用加载消息/进度指示器加载页面，然后进行AJAX调用以实际获取内容（这需要很长时间才能生成）。

Answer 3

您可以在上传时显示此代码。

$(document).ready(function() { 
    $.blockUI();
    //load your editor here
    setTimeout(function(){
        $.unblockUI();
    }, 10000);
}); ​

Answer 4

在您的页面中添加一个div作为毯子，最初它将显示并阻止整个页面。并在div的处理程序中隐藏div。这很简单，可能不是一个好的解决方案。