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 所代表的資源（圖片，視頻，音頻等）