鍍金池/ 問(wèn)答/物聯(lián)網(wǎng)  網(wǎng)絡(luò)安全  HTML/ 圖片加載img.onload,如何顯示進(jìn)度條?

圖片加載img.onload,如何顯示進(jìn)度條?

問(wèn)題描述

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

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

過(guò)程:選取圖片-》壓縮-》手機(jī)顯示圖片=》上傳,手機(jī)顯示這個(gè)環(huán)節(jié)出問(wèn)題。

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方(請(qǐng)勿用圖片代替代碼)
壓縮是canvas壓縮,手機(jī)顯示圖片base64,上傳是blob

你期待的結(jié)果是什么?實(shí)際看到的錯(cuò)誤信息又是什么?

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

因?yàn)橛羞M(jìn)度條,就會(huì)改善用戶體驗(yàn)

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

使用ajax-get請(qǐng)求圖片,可以獲取下載進(jìn)度,等于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); // 進(jìn)度
        }
    };
    xhr.send();
</script>
2017年1月29日 17:01