Javascript Filereader图像缩略图滞后

我正在使用FileReaderAPI显示照片上传的小缩略图。但是我有个问题。当你上传真正大的图片时，你上传了其中的一些，它开始滞后。缩略图很小，但是文件太大了。有办法解决这个问题吗？以下是我的javascript：

document.querySelector('input').addEventListener('change', function(e){
    var files = e.target.files;

  for(var i = 0; i < files.length; i++){

    var f = files[i];
    var reader = new FileReader();

    reader.onload = (function(tf){
      return function(evt){
        document.querySelector('.thumbs').innerHTML += '<div class="thumb" style="background-image: url('+evt.target.result+')"></div>';
      }
    })(f);

    reader.readAsDataURL(f);
  }
});

document.querySelector（'input'）。addEventListener（'change'，函数（e）{
var files=e.target.files；
对于（var i=0；i

这里有一把小提琴，你可以在那里测试它：

例如，我用6000x4000张照片测试了它，当超过4张时，5张照片开始滞后（我的电脑相当不错，所以它不应该像那样滞后）

顺便说一句，滞后是指减速、冻结等，而不是实际滞后

---

我发现了，但我真的不知道如何从这个答案中实现解决方案。提前谢谢

此示例在缩略图列表中显示图像之前，使用画布将图像的最大宽度调整为127px

document.querySelector（'input'）。addEventListener（'change'，函数（e）{
var files=e.target.files；
对于（var i=0；i{
var oc=document.createElement（'canvas'）；
var ctx=oc.getContext（'2d'）；
//调整大小为[maxWidth]px
变量刻度=最大宽度/img.width；
oc.width=img.width*刻度；
oc.height=img.height*刻度；
ctx.图纸图像（img，0，0，oc.宽度，oc.高度）；
//将画布转换回dataurl
回调（oc.toDataURL（））；
}
}

.thumbs{背景：#222；边框半径：5px；空白：nowrap；溢出-x：滚动；填充：.25rem；}
.thumb{高度：3rem；宽度：3rem；边框半径：3px；背景大小：封面；背景位置：中心；背景重复：无重复；显示：内联块；边距：.25rem.25rem计算（.25rem-4px）；}

谢谢，这太棒了。不过我有几个问题：1）是否可以更改缩放方法（以消除别名）？2） 我不能使用ES6，承诺真的必要吗？我该如何解决这些问题？2）我编辑了我的答案，用回电代替承诺。1） 可能吧，但我对图像处理的了解还不够，所以我无法在这里找到答案。谢谢，我在这里找到了一个解决方案，所以我要把这两个融合在一起！