終于放假了，可以做點自己喜歡的事情了，不過也要堅持學習啊，
--------------------------------------------------
用手機上網，經常看到加載進度條，尤其是加載圖片的，
做過多張圖片的加載進度，但是對于單張圖片，特別是圖片比較大的時候，需要進度條告訴用戶加載進度，且可以提高用戶體驗，
傳統的加載肯定不行，需要用到 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 所代表的資源（圖片，視頻，音頻等）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/252149.html
標籤：其他