XMLHttpRequest主进度条

时间:2017-04-05 11:55:57

标签: xmlhttprequest main progress

我创建了一个下载图片的进度条。所有工作都很好,只想显示所有文件的下载状态而不是个人。

var xhrList = [];
var link = [];

$('img').each(function() {
    link.push($(this).attr("src"));
});
var width = $('.logo img').width();
$('#logo').css({'width': 0, 'overflow': 'hidden'});     
for (var i=0; i< link.length; i++){
    xhrList[i] = new XMLHttpRequest();
    xhrList[i].open('GET', link[i], true);
    xhrList[i].responseType = "blob";
    console.log(xhrList[i]);
    xhrList[i].onprogress = function(e) {
        if (e.lengthComputable) {
            ProgressPerc = parseInt((e.loaded / e.total) * 100);
            $('#logo').stop().animate({'width': ProgressPerc + '%'},200);}
    };
    xhrList[i].send();
}

https://jsfiddle.net/ag8L9zmk/7/

0 个答案:

没有答案