免費學習推薦：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載入單張圖片展示進度的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
