Filereader图像缩略图延迟

Question

我使用Filereader API显示照片上传的小缩略图。但是，我遇到了问题。当你上传真正大的图片，并且你上传了一些图片时，它开始滞后。缩略图非常小，但文件太大。有没有办法来解决这个问题？这是我的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); 
    } 
}); 

这里是一个小提琴，你可以测试它：https://jsfiddle.net/snx79yw2/1/。例如，我用6000x4000的照片测试了它，当超过4,5张时，它们开始滞后（而且我的PC非常不错，所以它不应该像那样落后）。

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

我发现this post但我真的不知道如何从该答案中实现解决方案。 Thx提前！

Answer 1

本示例在将图像显示在缩略图列表中之前，使用Canvas将图像大小调整为最大宽度127px。

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) { 
 
     // resize the image before using the resolved dataURL to set the thumbnail src 
 
     resize(evt.target.result, 127, function(dataURL) { 
 
      document.querySelector('.thumbs').innerHTML += `<img class="thumb" src="${dataURL}" />`; 
 
     }); 
 
     } 
 
    })(f) 
 

 
    reader.readAsDataURL(f); 
 
    } 
 
}); 
 
/** 
 
* usage resize(dataURL:src, int:maxWidth, function:callback) 
 
*/ 
 
function resize(src, maxWidth, callback) { 
 
    var img = document.createElement('img'); 
 
    img.src = src; 
 
    img.onload =() => { 
 
     var oc = document.createElement('canvas'); 
 
     var ctx = oc.getContext('2d'); 
 
     // resize to [maxWidth] px 
 
     var scale = maxWidth/img.width; 
 
     oc.width = img.width * scale; 
 
     oc.height = img.height * scale; 
 
     ctx.drawImage(img, 0, 0, oc.width, oc.height); 
 
     // convert canvas back to dataurl 
 
     callback(oc.toDataURL()); 
 
    } 
 
}

.thumbs{background: #222;border-radius: 5px;white-space: nowrap;overflow-x: scroll;padding: .25rem;} 
 
.thumb{height: 3rem;width: 3rem;border-radius: 3px;background-size: cover;background-position: center center;background-repeat: no-repeat;display: inline-block;margin: .25rem .25rem calc(.25rem - 4px);}

<input type="file" multiple /> 
 
<div class="thumbs"></div>