画像を読み込むときにメモリリークが発生する

Question

次のコードを使用して画像を読み込んでサイズを変更しています。

$(imagesToProcess.files).each(function (idx, file) { 
        var img = new Image(); 
        img.onload = function (e) { 
         //var resized = _resizeImage(e.target); 
         URL.revokeObjectURL(e.target.src); 
        }; 
        img.src = URL.createObjectURL(file); 
       }); 

このコードは、私が実際のサイズ変更コメントアウトにもかかわらず、Chromeの巨大メモリスパイクをもたらします。私は間違って何をしていますか？

Answer 1

this answerに基づいています。このコードは、 `URL.revokeObjectURL（）`は何をするのか、私

    var fileQueue = []; 
        var lock = false; 
        var img = new Image(); 
        img.onload = function (e) { 
         URL.revokeObjectURL(e.target.src); 
         lock = false; 
        }; 

        $(imagesToProcess.files).each(function (idx, file) { 
         fileQueue.push(file); 
        }); 

        var processQueue = setInterval(processFile, 250); 

        function processFile() { 
         if (fileQueue.length == 0) { 
          console.log('nothing in queue'); 
          clearInterval(processQueue); 
          return; 
         } 
         if (!lock) { 
          img.src = URL.createObjectURL(fileQueue.shift()); 
          lock = true; 
         } 
        } 

Answer 2

関数の参照を使用する代わりに、多くの匿名関数を使用しないでください。

$(imagesToProcess.files).each(createImage); 

function createImage(idx, file){ 
    var img = new Image(); 
     img.onload = imageOnload; 
     img.src = URL.createObjectURL(file); 
} 
function imageOnload(e) { 
    URL.revokeObjectURL(e.target.src); 
} 

すべての画像作成のコードでは、関数オブジェクトのインスタンスが1つ作成されます。これがあなたのコードでメモリリークを引き起こす原因です。