首頁  >  文章  >  web前端  >  JavaScript介紹AJAX載入單張圖片展示進度的方法

JavaScript介紹AJAX載入單張圖片展示進度的方法

coldplay.xixi
coldplay.xixi轉載
2021-01-26 10:06:412192瀏覽

JavaScript介紹AJAX載入單張圖片展示進度的方法

免費學習推薦: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中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除