download progress for images

adobe proposal:

http://blogs.adobe.com/webplatform/2012/01/13/html5-image-progress-events/

workaround:

function loadImage(imageUrl, onprogress) {

return new Promise(function(resolve, reject) {

var xhr = new XMLHttpRequest();

var notifiedNotComputable = false;

xhr.open('GET', imageUrl, true);

xhr.responseType = 'arraybuffer';

xhr.onprogress = function(ev) {

if (ev.lengthComputable) {

onprogress(parseInt((ev.loaded / ev.total) * 100));

}

else

{

if (!notifiedNotComputable) {

notifiedNotComputable = true;

onprogress(-1);

}

}

};

xhr.onloadend = function() {

if (!xhr.status.toString().match(/^2/)) {

reject(xhr);

} else {

if (!notifiedNotComputable) {

onprogress(100);

}

var options = {};

var headers = xhr.getAllResponseHeaders();

var m = headers.match(/^Content-Type\:\s*(.*?)$/mi);

if (m && m[1]) {

options.type = m[1];

}

var blob = new Blob([this.response], options);

resolve(window.URL.createObjectURL(blob));

}

};

xhr.send();

});

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个是...
    changxiaonan阅读 2,283评论 0 2
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,899评论 0 1
  • H5 meta详解 viewport width:控制 viewport 的大小,可以指定的一个值,如果 600,...
    FConfidence阅读 842评论 0 3
  • 那天刷微博,偶然间看到这首《秋风词》。 秋风清,秋月明,落叶聚还散,寒鸦栖复惊。 ...
    不做梦不想阅读 523评论 0 0
  • form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 作用:form表单提交的方式向服务器发送数...
    姚小帅阅读 821评论 0 0