Find resultant of two asynchronous ajax request in xhr onprogress

Question

I am trying to find images in ajax request response text and fetch the src url for using in another ajax request.

I need to know progress of loading each image and show the resultant of this progress in my progress bar. But as you can see if image1 loaded 10%; and image2 20%.

My result decreases from 20% to 10% . My progress bar goes backward and then goes forward.

Any help? or is this a good solution?

parseResult: function(result, navNumber) {
  var self = this;
  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,
      complete = 0,
      temp = 1;
    navigation.progress.fadeIn(50);

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

      $.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 = complete + (percentComplete / imagesLength);
              console.log(parseInt(temp * 100) + '%');
              navigation.progress.html(parseInt(temp * 100) + '%');
            }
          }, false);
          return xhr;
        },
        complete: function() {
          complete = temp;
          
          i++;
          if (i == imagesLength) {
            self.closeLoading(navNumber);
          }
        }
      });
    });
  } else {
    return;
  }
}

Shouldn't you set `complete = temp;` inside progress callback, not just only inside complete callback?! — A. Wolff, Jun 11 '16 at 09:43
@amif : If i understand correctly, you want to show single progressbar for two image loading, right? — Parag Bhayani, Jun 11 '16 at 09:50
@ParagBhayani YES. Exactly but i'm going to do this for all images not 2. (maybe in future i have 10) and Sorry actually it's increased to 199% , but i need 0% to 100% — Amir Rezvani, Jun 14 '16 at 20:36
@ParagBhayani check this out -> http://www.haveyoumetme.ir/2 — Amir Rezvani, Jun 14 '16 at 20:41
@AmirRezvani : Then your question itself your answer, here because of 2 images loading it goes to 0 to 200% so you just need to devide percent by number of images ... :) Updated example have a look at it... added showPercent variable which does that, let me know whether it is helpful or not — Parag Bhayani, Jun 15 '16 at 05:59

Parag Bhayani · Answer 1 · 2016-06-15T06:01:17.737

Here I have removed complete variable of yours, as I can' understand what is the purpose of it, and added a local variable lastPercent for each request, which will remember it's last progress percent for the perticular image request, so on new update we will add new percent and remove old percents... I hope this logic is clear to you...

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;
  }
}

in fact in this situation i do not know witch ajax request are effecting on temp variable ... and witch image is loaded more ? — Amir Rezvani, Jun 15 '16 at 06:40
@AmirRezvani: I didn't get you what you want to ask??? you want 0 to 100% and this script is giving you, so not able to understand your expectation ... — Parag Bhayani, Jun 15 '16 at 07:37
i used your script in my project and it seems ok, but in 0-200% Domain. actually with my fully respect ,it is not right. haveyoumetme.ir/2 --> you can find your code in this url — Amir Rezvani, Jun 17 '16 at 01:17
@AmirRezvani: i have seen your code and you have used new variable showPercent and because of that it is still creating an issue, what I was suggesting that if there are 4 images then let it should go from 0 to 400 but when you are showing it in progress at that time divide it by 4(imagesLength)... — Parag Bhayani, Jun 17 '16 at 14:11

Find resultant of two asynchronous ajax request in xhr onprogress

1 Answers1