JavaScript 练手小技巧：AJAX加载单张图片展示进度

终于放假了，可以做点自己喜欢的事情了，不过也要坚持学习啊。

--------------------------------------------------

用手机上网，经常看到加载进度条，尤其是加载图片的。

做过多张图片的加载进度，但是对于单张图片，特别是图片比较大的时候，需要进度条告诉用户加载进度，且可以提高用户体验。

传统的加载肯定不行，需要用到 AJAX 加载，AJAX 加载有个专门的进度事件  progress。

具体demo 如下。实现目标：

加载某图片，且显示加载百分比进度；加载完毕后，就展示该图片。

HTML 结构：

<div id="pro">
    0%
</div>
<div id="box">
    内容加载中。。。
</div>

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 所代表的资源（图片，视频，音频等）