图片加载img.onload，如何显示进度条？

Question

问题描述

手机端由于需要压缩，选取图片后，特别是大图片，显示出来就比较慢，通常6M以上的图片需要至少5s，这就给用户体验带来挑战。

问题出现的环境背景及自己尝试过哪些方法

过程：选取图片-》压缩-》手机显示图片=》上传，手机显示这个环节出问题。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
压缩是canvas压缩，手机显示图片base64，上传是blob

你期待的结果是什么？实际看到的错误信息又是什么？

能否根据base64,做一些进度。

因为有进度条，就会改善用户体验

Answer 1

使用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>

Answer 2

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