Утечка памяти при загрузке изображений

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, решил это для меня

    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); 
} 

В коде для каждого создания изображения создается один экземпляр объекта функции. Это то, что вызывает утечку памяти в вашем коде.