javascript - 简单的 jQuery 进度条

Question

假设:有一些电缆调制解调器，一个人想要列出 MySQL 数据库中的数据。 (IP 地址、MAC 地址、调制解调器类型...)

以下是 HTML 和 PHP 代码:($limit 值:15 或 25 或 50，用户可以选择)

<table>
  <?php
    $sql = "SELECT ... needed fields from some tables... LIMIT $start, $limit";

    $result = mysqli_query( $conn, $sql ) or trigger_error( mysqli_error( $conn ) );

    while ( $row = mysqli_fetch_object( $result ) ) {
      echo "<tr class='modem_row' id='$row->modem_id' style='color:gray'>\n";
      echo "<td>$row->mac_address</td>\n";
      echo "<td>$row->ip_address</td>\n";
      echo "<td>$row->type</td>\n";
      // ...
      echo "</tr>\n";
    }

    mysqli_free_result( $result );
  ?>
</table>

<div id="progress" style="display:none; width:150px; height:20px"></div>

数据库查询完成后，jQuery 脚本会查询所有显示的调制解调器，无论它们是否“在线”(通过 SNMP)。这是 jQuery 脚本:

<script type="text/javascript">
  $(function() {
    $(".modem_row").each(function(){
      var modem_id = $(this).attr("id");
      $.ajax({
        url: "/modules/get_modem_state.php?modem_id="+modem_id,
        success: function(data) {
          if (data == 'online') {
            $('#'+modem_id).animate({color: 'black'});
          }
        }
      });
    });
  });
</script>

好的，可以了。但我想在一个简单的 HTML div 中看到整个 ajax 进度。当 jQuery 脚本开始时，最好出现“进度”div，然后在简单的彩色条中显示百分比，当所有 ajax 查询完成时，“进度”条消失。

(例如，如果$limit = 15，则有15个ajax查询。如果第一个查询完成，那么“progress”div宽度将为10px，在第二个ajax查询完成后，“progress”div宽度将为20px 等..)

我认为我应该使用 jQuery Progressbar，但我不知道如何粘合在一起。

Answer 1

您可以使用任何加载图像。在这里创建您自己的加载图像:http://www.ajaxload.info/

然后修改您的代码:

<div class="loader" style="display:none;">
    <img src="loader.gif" alt="" />
</div>

<script type="text/javascript">
  $(function() {
    $(".modem_row").each(function(){
      var modem_id = $(this).attr("id");
      $(".loader").show();
      $.ajax({
        url: "/modules/get_modem_state.php?modem_id="+modem_id,
        success: function(data) {
          if (data == 'online') {
            $(".loader").hide();
            $('#'+modem_id).animate({color: 'black'});
          }
        },
        error: function(){
            $(".loader").hide();
        }
      });
    });
  });
</script>

您需要将图像添加到<img />中标签。

如果你想使用 jQuery UI 进度条，那么你必须手动设置“请求持续时间”。请求可能会在您设置的持续时间之前完成，也可能会在您设置的持续时间之后完成。在这两种情况下，用户体验都很差。

这里是设置 jQuery UI 进度栏的链接:http://jqueryui.com/progressbar/#label

除非您加载 Flash 文件，否则您无法获得请求的确切持续时间(对数据库的请求 + 对服务器的请求 + 处理 + 内存 + CPU ...很多因素)。 Flash 有一种技术可以计算加载到舞台上的所有组件的大小，并且可以为您提供精确的实时进度条。除非您正在构建 Flash 应用程序，否则使用它是没有意义的。

编辑2:

这是使用 jQuery UI 进度栏的解决方案:

    <div class="loader" style="display:none;">
    <div id="progressbar"><div class="progress-label">Loading...</div></div>
</div>

<script type="text/javascript">
$(function() {
    var progress_duration = 2000;
    var total_number_of_items = 15;

    $("#progressbar").progressbar({
        value: false,
        change: function() {
            var percent = $("#progressbar").progressbar("value") + "%";
            $(".progress-label").text(percent);
        },
        complete: function() {
            $(".progress-label").text("Complete");
        }
    });

    function calculateProgress(){
        var val = $("#progressbar").progressbar("value") || 0;
        var step = Math.round(100 / total_number_of_items);
        var new_val = val + step;
        if(new_val > 100) new_val = 100;
        $("#progressbar").progressbar("value", new_val);
        if(val < 99){
            setTimeout(calculateProgress, 80);
        }
    }

    function animateProgressBar(){
        setTimeout(calculateProgress, progress_duration);
    }

    $(".modem_row").each(function(){
        var modem_id = $(this).attr("id");
        $(".loader").show();
        $.ajax({
            url: "/modules/get_modem_state.php?modem_id="+modem_id,
            success: function(data) {
                if(data == 'online'){
                    animateProgressBar();
                    $('#'+modem_id).animate({color: 'black'});
                }
            },
            error: function(){

            }
        });
    });
});
</script>

这是一些 CSS 代码:

.ui-progressbar {
    position: relative;
}
.progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}