• <samp id="jobfq"><output id="jobfq"><kbd id="jobfq"></kbd></output></samp>
    <font id="jobfq"><label id="jobfq"><sup id="jobfq"></sup></label></font>
    <mark id="jobfq"></mark>
  • 鍍金池/ 問答/物聯網  網絡安全  HTML/ 圖片加載img.onload,如何顯示進度條?

    圖片加載img.onload,如何顯示進度條?

    問題描述

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

    問題出現的環境背景及自己嘗試過哪些方法

    過程:選取圖片-》壓縮-》手機顯示圖片=》上傳,手機顯示這個環節出問題。

    相關代碼

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

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

    能否根據base64,做一些進度。

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

    回答
    編輯回答
    初心
    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
    少妇宾馆半推半就激情