Question

我正在尝试在ajax请求响应文本中查找图像并获取src url以便在另一个ajax请求中使用。

我需要了解加载每张图片的进度，并在进度条中显示此进度的结果。但正如你可以看到image1加载10％; 和image2 20％。

我的结果从20％降低到10％。我的进度条倒退然后继续。

有任何帮助吗？或者这是一个很好的解决方案吗？

<?xml version="1.0" encoding="utf-8"?>
<com.daprlabs.cardstack.SwipeFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:swipedeck="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.daprlabs.cardstack.SwipeDeck
        android:id="@+id/swipe_deck"
        android:layout_width="match_parent"
        android:layout_height="480dp"
        android:padding="20dp"
        swipedeck:card_spacing="10dp"
        swipedeck:max_visible="3"
        swipedeck:render_above="true"
        swipedeck:rotation_degrees="15" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Button" />

</com.daprlabs.cardstack.SwipeFrameLayout>

Answer 1

这里我删除了你的完整变量，因为我可以'理解它的目的是什么，并为每个请求添加了一个局部变量lastPercent，它将记住它是特定图像请求的最后进度百分比，所以在新的更新我们将添加新百分比并删除旧百分比...我希望这个逻辑对你来说很清楚......

parseResult: function(result, navNumber) {
  var self = this;
  var showPercent;
  var imagesMatter = $(result).find('img');
  var imagesLength = imagesMatter.length;

  // if there is any image in ajax request then fetch imgs using ajax for show progress bar
  if (imagesLength >= 1) {
    var i = 0,
      temp = 1;
    navigation.progress.fadeIn(50);

    imagesMatter.each(function() {
      var $this = $(this);
      var URL = $this.attr('src');
      var lastPercent = 0;

      $.ajax({
        url: URL,
        xhr: function() {
          var xhr = new window.XMLHttpRequest();
          xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
              var percentComplete = parseFloat(evt.loaded / evt.total).toFixed(1);
              temp = temp + (percentComplete / imagesLength) - lastPercent;
              lastPercent = (percentComplete / imagesLength);
              showPercent = temp/imagesLength;
              console.log(parseInt(showPercent * 100) + '%');
              navigation.progress.html(parseInt(showPercent * 100) + '%');
            }
          }, false);
          return xhr;
        },
        complete: function() {
          i++;
          if (i == imagesLength) {
            self.closeLoading(navNumber);
          }
        }
      });
    });
  } else {
    return;
  }
}

在xhr onprogress中查找两个异步ajax请求的结果

1 个答案: