CODEWITHSUNDEEP
javascriptgoogle-chrome
Juvaly
Juvaly

Reputation: 271

Memory leak when loading images

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?

Upvotes: 0

Views: 1623

Answers (3)

Venryx
Venryx

Reputation: 18087

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

Upvotes: 0

Juvaly
Juvaly

Reputation: 271

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

Upvotes: 1

manjunathub
manjunathub

Reputation: 1

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.

Upvotes: 0

Related Questions