tsParticles non défini même s'il l'est

Dev
1

J’essaie d’intégrer l’animation ‘links’ de tsParticles dans mon thème Discourse.
Cependant, la console indique :

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)

Mais vous pouvez voir que dans mon code, il l’est clairement, en haut.
Voici mon 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>

De plus, en regardant l’<head> de la page, cette balise est présente.

2

On dirait une condition de concurrence où tsParticles.load() s’exécute avant que le js ait fini de charger.

Puisque vous êtes déjà dans l’élément <head>, vous pouvez probablement extraire le code de création d’une balise script pour tsParticles, et en faire une vraie balise script afin qu’elle se charge avec la page au lieu de se charger après la fin du chargement de la page.

Si vous devez conserver le chargement du script dans le JS, vous pouvez exécuter le code lors de l’événement load.

const script = document.createElement('script');
script.addEventListener("load", () => {
      console.log("appelé", 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 « J'aime »
3

Ça marche, merci beaucoup !

4

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