How to properly load dynamic HTML content running WebGL

Question

I am building a single page portfolio by dynamically loading content on the page with click events. Some of the content use WebGL libraries such as Blotter.js or Pixi.js. The problem I observed is WebGL content slowing down and memory increasing on every new loading.

I add a function to clear the content before loading a new one. I guess this is where I get stuck, because the problem remains.

You can have a look at the prototype here. When clicked, the logo clears and loads the same Blotter.js running content. If clicked several times, the problem gets visible.

And here is the code snippet:

////// BLOTTER VARIABLES
const reloadButton = document.getElementById("reload-button");
const blotterTitles = [];
let runBlotterTitles = true;

////// DYNAMIC RELOADER
reloadButton.addEventListener("click", function(event) {
  emptyContent();  
  $.get("allwork.html", function(data) {
    $("#main-content").html(data);
    runBlotterTitles = true;
    createBlotterTitles();
  })
});

////// CLEAR BLOTTER TITLES
const emptyContent = () => {
  blotterTitles.length = 0;
  runBlotterTitles = false;
  createBlotterTitles();
  document.getElementById('fetch-content').remove();
};

////// CREATING BLOTTER TITLES
const createBlotterTitles = () => {
  if(!runBlotterTitles) {
    return
  } else {
    // Run the function creating Blotter titles
    }
    runBlotterTitles = true;
  }
};

Is there anyone who knows what is wrong or missing ? I think the closest post I've found for this problem is this one.

Thanks for reading. Best.

How to properly load dynamic HTML content running WebGL

0 Answers0