tsParticles non definito anche se lo è

Sviluppatore
1

Sto cercando di inserire l’animazione ‘links’ di tsParticles nel mio tema Discourse.
Tuttavia, la console dice:

theme-field-96515-common-html-script-1.js:36 Uncaught (in promise) ReferenceError: tsParticles is not defined
    at theme-field-96515-common-html-script-1.js:36:13
    at HTMLDocument.<anonymous> (theme-field-96515-common-html-script-1.js:36:13)

Ma puoi vedere che nel mio codice, è chiaramente lì, in cima.
Ecco il mio codice:

<script type="text/discourse-plugin" version="1.14.0">
  var script = document.createElement('script');
  script.src = "https://cdn.jsdelivr.net/npm/@tsparticles/preset-links@3.0.2/tsparticles.preset.links.bundle.min.js";
  document.head.appendChild(script);
  const showLinks = settings.show_tsParticles_links_animation;
  if (showLinks) {
    document.addEventListener("DOMContentLoaded", function() {
      var elements = document.querySelectorAll('section#main');
      elements.forEach(function(el) {
        var wrapper = document.createElement('div');
        wrapper.className = 'wrapper';
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
      });
      var elements = document.querySelectorAll('div#main-outlet-wrapper');
      elements.forEach(function(el) {
        var wrapper = document.createElement('div');
        wrapper.className = 'content';
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
      });
      
      (async () => {
        await tsParticles.load({
          id: "tsparticles",
          options: { preset: "links" },
          background: {
            "color": {"value":"#0d47a1"}
          }
        });
      })();
    });
  }
</script>

Inoltre, guardando l’<head> della pagina, questo tag è presente.

2

Sembra una race condition in cui tsParticles.load() viene eseguito prima che il js abbia finito di caricarsi.

Dato che sei già nell’elemento <head>, probabilmente puoi estrarre il codice per creare un tag script per tsParticles e renderlo un vero tag script in modo che venga caricato con la pagina invece che dopo il caricamento della pagina.

Se devi mantenere il caricamento dello script nel JS, puoi eseguire il codice sull’evento load.

const script = document.createElement('script');
script.addEventListener("load", () => {
      console.log("called", tsParticles);
      initTsParticles();
  })
script.src = "https://cdn.jsdelivr.net/npm/@tsparticles/preset-links@3.0.2/tsparticles.preset.links.bundle.min.js";
document.head.appendChild(script);

function initTsParticles() {
  tsParticles.load({
    ...
  });
}
2 Mi Piace
3

Va bene, grazie mille!

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.