小编给大家分享一下JavaScript中如何使用AJAX加载单张图片展示进度，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联是专业的麒麟网站建设公司，麒麟接单;提供做网站、
网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行麒麟网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
用手机上网，经常看到加载进度条，尤其是加载图片的。
做过多张图片的加载进度，但是对于单张图片，特别是图片比较大的时候，需要进度条告诉用户加载进度，且可以提高用户体验。
传统的加载肯定不行，需要用到 AJAX 加载，AJAX 加载有个专门的进度事件 progress。
具体demo 如下。实现目标：
加载某图片，且显示加载百分比进度；加载完毕后，就展示该图片。
HTML 结构：
0%
内容加载中。。。
JavaScript：
let box = document.getElementById("box");
let pro = document.getElementById("pro");
let req = new XMLHttpRequest();
req.open("get","images/1.png" , true);
req.responseType = "blob"; // 加载二进制数据
req.send();
req.addEventListener("progress",function(oEvent){
if (oEvent.lengthComputable) {
var percentComplete = oEvent.loaded / oEvent.total * 100;
pro.innerHTML = percentComplete + "%" ;
} else {
// 总大小未知时不能计算进程信息
}
});
// 加载完毕
req.addEventListener("load",function(oEvent){
let blob = req.response; // 不是 responseText
pro.innerHTML = "图片加载完毕";
box.innerHTML = ``;
});这里需要说明的是：
req.responseType = "blob";
设置请求数据类型为 blob 类型。Binary large Object，就是较大的二进制对象，可以用来加载非文本数据。此demo 加载的是一张图片。
因此，在接受返回数据的时候，不是 reponseText 。
window.URL.createObjectURL(blob) 会基于 blob 对象生成对象的URL路径。这样，就可以在浏览器中看到 blob 所代表的资源（图片，视频，音频等）
以上是“JavaScript中如何使用AJAX加载单张图片展示进度”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
分享标题：JavaScript中如何使用AJAX加载单张图片展示进度-创新互联
文章来源：
http://bzwzjz.com/article/cdpige.html
