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

我正在尝试在ajax请求响应文本中查找图像并获取在另一个ajax请求中使用的src url。在xhr onprogress中查找两个异步ajax请求的结果

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

我的结果从20％降到10％。 我的进度条向后移动，然后向前移动。

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

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;

}

}

+0

你不应该设置'complete = temp; “内部进度回调，而不仅仅是内在完整的回调？ –

+0

@amif：如果我理解正确，你想要显示两个图像加载单进度条，对吗？ –

+0

jsfiddle请 –