tsParticles ist nicht definiert, obwohl es es ist

Entwickler
1

Ich versuche, die tsParticles ‘links’-Animation in mein Discourse-Theme einzubauen.
Allerdings sagt die Konsole:

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)

Aber Sie können sehen, dass es in meinem Code ganz oben klar ist.
Hier ist mein Code:

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

Außerdem, wenn man sich den <head> der Seite ansieht, ist dieser Tag vorhanden.

2

Es scheint ein Wettlaufzustand zu sein, bei dem tsParticles.load() ausgeführt wird, bevor das JavaScript fertig geladen ist.

Da Sie sich bereits im <head>-Element befinden, können Sie den Code zum Erstellen eines Skript-Tags für tsParticles wahrscheinlich einfach herausziehen und es zu einem tatsächlichen Skript-Tag machen, damit es mit der Seite geladen wird, anstatt nachdem der Seitenaufruf abgeschlossen ist.

Wenn Sie den Skript-Ladevorgang im JavaScript beibehalten müssen, können Sie den Code beim load-Ereignis ausführen.

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 „Gefällt mir“
3

Das funktioniert, vielen Dank!

4

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