小編給大家分享一下JavaScript中如何使用AJAX加載單張圖片展示進度，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)是專業(yè)的麒麟網(wǎng)站建設(shè)公司，麒麟接單;提供做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行麒麟網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

用手機上網(wǎng)，經(jīng)常看到加載進度條，尤其是加載圖片的。

做過多張圖片的加載進度，但是對于單張圖片，特別是圖片比較大的時候，需要進度條告訴用戶加載進度，且可以提高用戶體驗。

傳統(tǒng)的加載肯定不行，需要用到 AJAX 加載，AJAX 加載有個專門的進度事件  progress。

具體demo 如下。實現(xiàn)目標：

加載某圖片，且顯示加載百分比進度；加載完畢后，就展示該圖片。

HTML 結(jié)構(gòu)：

<p id="pro">
    0%
</p>
<p id="box">
    內(nèi)容加載中。。。
</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";   // 加載二進制數(shù)據(jù)
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";

設(shè)置請求數(shù)據(jù)類型為 blob 類型。Binary large Object，就是較大的二進制對象，可以用來加載非文本數(shù)據(jù)。此demo 加載的是一張圖片。

因此，在接受返回數(shù)據(jù)的時候，不是 reponseText 。

window.URL.createObjectURL(blob)   會基于 blob 對象生成對象的URL路徑。這樣，就可以在瀏覽器中看到 blob 所代表的資源（圖片，視頻，音頻等）

以上是“JavaScript中如何使用AJAX加載單張圖片展示進度”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：JavaScript中如何使用AJAX加載單張圖片展示進度-創(chuàng)新互聯(lián)
當前URL：http://aaarwkj.com/article14/cdpige.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、全網(wǎng)營銷推廣、云服務(wù)器、標簽優(yōu)化、移動網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)