1

Here's the following code :

let g = {
  characterImg: document.createElement('img'),
  num: 0
}

function test() {

  let myDiv = document.getElementById('my-div')

  const param = '#date=' + new Date().getTime()
  const imagePath = (g.num + 1).toString() + '.png' + param

  let removeListener = false
  const myFunction = function() {
    myDiv.style.backgroundImage = "url('" + imagePath + "')"

    if (removeListener)
      g.characterImg.removeEventListener('load', myFunction)
  }

  g.characterImg.src = imagePath
  if (g.characterImg.complete)
    myFunction()
  else {
    removeListener = true
    g.characterImg.addEventListener('load', myFunction)
  }

  // 15 pictures
  g.num = (g.num + 1) % 15
}

Knowing my application uses many animated png files constantly, i have two questions :

  1. Executing the test function many times increase the memory without being released by the garbage collector at any time. Even if it's only a matter of a few Mo after minutes of use, i want to be able to load an image without a little leak for each load. From what i know, changing the src is the cause but i don't know how to resolve this.

  2. Changing the backgroundImage isn't a memory leak but constantly increases the memory without calling the garbage collector until i minimize the active window for a few seconds or when the app reaches around 500 Mo of use in my case. Isn't there a way to make the app call the garbage collector more efficiently or at least set a memory limit for an Electron application?

Any help is appreciated :)

Antony F
  • 55
  • 1
  • 4

1 Answers1

0

Here's an actual answer, i used fs.readFile then set the background property in base64.

fs.readFile(imagePath, function(err, data) {
if (err) throw err
  const myImageData = 'data:image/png;base64,' + data.toString('base64')
  myDiv.style.backgroundImage = 'url(' + myImageData + ')'
})

Much better than creating an image everytime!

Antony F
  • 55
  • 1
  • 4