Question

我怎样才能像GMail那样制作类似的东西http://o7.no/H72gPf 当应用程序启动时，gmail显示进度条，它向我们显示已加载内容的百分比（部分）。

我如何能够确定部分或完全加载某些JS文件（HTML内容，CSS或图像）？

P.S。在服务器端，我想使用PHP

Answer 1

您可以通过多种方式实现这一目标。

一种简单的方法是将脚本标记（对于包含的脚本）放在内容下面，并让每个包含的脚本调用文档HEAD部分中定义的某些函数。

因此，如果您在文档头部的脚本标记中定义它：

function increment_progress() {
   // your HTML-dependent implementation here
}

然后在包含的脚本底部执行此操作：

increment_progress();

increment_progress的确取决于您的进度条的外观，以及如何使用HTML构建它。

例如，您可以在DIV中使用TABLE，将TD添加到每次调用increment_progress的第一个TABLE行，TD和DIV具有固定的TD宽度和不同的背景颜色。然后选择TD的宽度大致等于（DIV的宽度）/（要加载的脚本数）。

这样的事情：

<html>
<head>
  <style type="text/css">
    #your_interface { display: none; }
    #progressbar { width: 100px; background: #00ff00; }
    #progressbar table { width: 100%; margin: 0px; }
    #progressbar table td { padding: 0px; border: 0px; 
                            border-collapse: collapse; 
                            background: #ff0000; width: 10px; }
  </style>
  <script type="text/javascript" href="/path/to/jquery"></script>
  <script type="text/javascript">
    var count = 0;
    function increment_progress() {
       $('#progressbar table tr').eq(0).append('<td>&nbsp;</td>');
       count++;
       if (count == 9) { // the number of scripts loaded below
          $('#progressbar').hide();
          $('#your_interface').show();
       }
    }
  </script>
<head>
<body>
  <div id="progressbar"><table><tr><td></td></tr></table></div>

  <div id="your_interface">
     The rest of your content here!
  </div>

  <script type="text/javascript" href="/path/to/script1"></script>
  <script type="text/javascript" href="/path/to/script2"></script>
  <script type="text/javascript" href="/path/to/script3"></script>
  <script type="text/javascript" href="/path/to/script4"></script>
  <script type="text/javascript" href="/path/to/script5"></script>
  <script type="text/javascript" href="/path/to/script6"></script>
  <script type="text/javascript" href="/path/to/script7"></script>
  <script type="text/javascript" href="/path/to/script8"></script>
  <script type="text/javascript" href="/path/to/script9"></script>
</body>
</html>

如果你有一个快速的服务器和快速的互联网连接，你几乎看不到它： - ）

如果您已经使用AJAX加载脚本，可以从“响应”处理函数中调用increment_progress()。

更新：显示加载后如何转换到真实用户界面。

Answer 2

前几天我做了类似的事情，我需要在用户等待的时候做一些重要的查询，你可以做的是：

创建一个包含iframe的页面，iframe中的页面启动一个新的线程，该线程进入应用程序。启动线程后，它显示一个带进度条的页面，它还有一个简单的脚本，每x秒重新加载一次页面。这可以很简单：

<html>
    <head></head>
    <body>
        <script>
            setTimeout(function(){
                window.location.reload();
            }, 10000);
        </script>
        <img src="/images/loader.gif" />
    </body>
</html>

当页面重新加载时，它首先检查应用程序的状态，然后再次发送加载页面或将顶部框架重新加载到实际应用程序开始屏幕的页面。

我将应用程序的状态保存在一个简单的文件中，该文件在每个主要操作之后都会更新，它需要像这样，因为它是单独的线程。根据此文件中的状态，您可以调整显示的加载栏。

用于启动javaScript Web应用程序的加载指示器

2 个答案: