免费学习推荐：js视频教程
用手机上网，经常看到加载进度条，尤其是加载图片的。
做过多张图片的加载进度，但是对于单张图片，特别是图片比较大的时候，需要进度条告诉用户加载进度，且可以提高用户体验。
传统的加载肯定不行，需要用到 ajax 加载，ajax 加载有个专门的进度事件  progress。
具体demo 如下。实现目标：
加载某图片，且显示加载百分比进度；加载完毕后，就展示该图片。
html 结构：
<p id="pro">    0%</p><p id="box">    内容加载中。。。</p>
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 = `<img src = ${window.url.createobjecturl(blob)} >`;});
这里需要说明的是：
req.responsetype = blob;
设置请求数据类型为 blob 类型。binary large object，就是较大的二进制对象，可以用来加载非文本数据。此demo 加载的是一张图片。
因此，在接受返回数据的时候，不是 reponsetext 。
window.url.createobjecturl(blob)   会基于 blob 对象生成对象的url路径。这样，就可以在浏览器中看到 blob 所代表的资源（图片，视频，音频等）
相关免费学习推荐：javascript（视频）
以上就是javascript介绍ajax加载单张图片展示进度的方法的详细内容。