javascript - Find resultant of two asynchronous ajax request in xhr onprogress -
i trying find images in ajax request response text , fetch src url using in ajax request.
i need know progress of loading each image , show resultant of progress in progress bar. can see if image1 loaded 10%; , image2 20%.
my result decreases 20% 10% . progress bar goes backward , goes forward.
any help? or solution?
parseresult: function(result, navnumber) { var self = this; var imagesmatter = $(result).find('img'); var imageslength = imagesmatter.length; // if there image in ajax request fetch imgs using ajax show progress bar if (imageslength >= 1) { var = 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; } }
here have removed complete variable of yours, can' understand purpose of it, , added local variable lastpercent each request, remember it's last progress percent perticular image request, on new update add new percent , remove old percents... hope logic clear you...
parseresult: function(result, navnumber) { var self = this; var showpercent; var imagesmatter = $(result).find('img'); var imageslength = imagesmatter.length; // if there image in ajax request fetch imgs using ajax show progress bar if (imageslength >= 1) { var = 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; } }
Comments
Post a Comment