<wbr id="jl7f7"></wbr>

        <i id="jl7f7"></i>
          <acronym id="jl7f7"></acronym>

          <s id="jl7f7"></s>

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

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

          問(wèn)題描述

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

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

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

          相關(guān)代碼

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

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

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

          因為有進(jìn)度條,就會(huì )改善用戶(hù)體驗

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

          使用ajax-get請求圖片,可以獲取下載進(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
          日韩性做爰免费a片aa片,天天躁恨恨躁夜躁2020,精品久久综合1区2区3区激情,精产国品一二三产品麻豆

          <wbr id="jl7f7"></wbr>

                <i id="jl7f7"></i>
                  <acronym id="jl7f7"></acronym>

                  <s id="jl7f7"></s>

                  <ins id="jl7f7"></ins><button id="jl7f7"><strong id="jl7f7"></strong></button>