Memory leak when loading images

Question

I'm using the following code to load and resize images.

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

This code results in a gigantic memory spike in Chrome, even though I commented out the actual resizing. What am I doing wrong?

Function creation within a loop is really bad practice. Try to avoid it firstly — Dmitry Volokh, Apr 18 '16 at 13:46
this post may help you: http://stackoverflow.com/questions/7544957/memory-leak-in-javascript-when-using-new-image?rq=1 — Kingmaker, Apr 18 '16 at 13:50
@evolutionxbox https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL — Juvaly, Apr 18 '16 at 13:57

score 1 · Accepted Answer · edited May 23 '17 at 12:31

This code, which is based on this answer, solved it for me

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

Note: This no longer solves the memory leak in Chrome (tested in v83). — Venryx, Jun 25 '20 at 18:21

score 0 · Answer 2 · answered Apr 18 '16 at 13:49

Don't use much of anonymous functions instead use reference of the functions.

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

In you code for every image creation one instance of function object is created. That is what causing memory leak in your code.

The code you are showing has the exact same effect on memory. Goes up and up and up. — Juvaly, Apr 18 '16 at 13:58

score 0 · Answer 3 · answered Jun 25 '20 at 20:50

0

I ended up solving this memory leak in my program by using an alternate method of jpeg-decoding (using library rather than browser's Image object): https://stackoverflow.com/a/62584068/2441655

answered Jun 25 '20 at 20:50

Venryx

15,624
10
70
96

Memory leak when loading images

3 Answers3