鍍金池/ 問答/物聯(lián)網(wǎng)  網(wǎng)絡安全  HTML/ 圖片加載img.onload，如何顯示進度條？

圖片加載img.onload，如何顯示進度條？

問題描述

手機端由于需要壓縮，選取圖片后，特別是大圖片，顯示出來就比較慢，通常6M以上的圖片需要至少5s，這就給用戶體驗帶來挑戰(zhàn)。

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

過程：選取圖片-》壓縮-》手機顯示圖片=》上傳，手機顯示這個環(huán)節(jié)出問題。

相關代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
壓縮是canvas壓縮，手機顯示圖片base64，上傳是blob

你期待的結果是什么？實際看到的錯誤信息又是什么？

能否根據(jù)base64,做一些進度。

因為有進度條，就會改善用戶體驗

回答
編輯回答
初心

http://www.ionic.wang/ng_cord...

2018年4月23日 23:42
編輯回答
萢萢糖

使用ajax-get請求圖片，可以獲取下載進度，等于100%再賦值到img的src，比如：

<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', './1.jpg');
    xhr.onprogress = function (event) {
        if (event.lengthComputable) {
            console.log((event.loaded / event.total) * 100); // 進度
        }
    };
    xhr.send();
</script>
2017年1月29日 17:01