tsParticles غير معرف على الرغم من وجوده

أحاول وضع الرسوم المتحركة ‘links’ من tsParticles في نسق Discourse الخاص بي.
ولكن، تظهر رسالة في وحدة التحكم (Console) تفيد بما يلي:

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)

ولكن يمكنك أن ترى أنه في الكود الخاص بي، هو موجود بوضوح، في الأعلى.
هذا هو الكود الخاص بي:

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

علاوة على ذلك، عند النظر إلى الوسم <head> في الصفحة، يوجد هذا الوسم.

يبدو أن هناك حالة تسابق حيث يتم تشغيل tsParticles.load() قبل اكتمال تحميل ملف js.\n\nنظرًا لأنك موجود بالفعل في عنصر \u003chead\u003e، يمكنك على الأرجح استخراج الكود لإنشاء علامة نص برمجي لـ tsParticles، وجعلها علامة نص برمجي فعلية بحيث يتم تحميلها مع الصفحة بدلاً من تحميلها بعد انتهاء تحميل الصفحة.\n\nإذا كنت بحاجة إلى الاحتفاظ بتحميل النص البرمجي في ملف js، يمكنك تشغيل الكود في حدث load.\n\njs\nconst script = document.createElement('script');\nscript.addEventListener(\"load\", () =\u003e {\n console.log(\"called\", tsParticles);\n initTsParticles();\n })\nscript.src = \"https://cdn.jsdelivr.net/npm/@tsparticles/preset-links@3.0.2/tsparticles.preset.links.bundle.min.js\";\ndocument.head.appendChild(script);\n\nfunction initTsParticles() {\n tsParticles.load({\n ...\n });\n}\n

إعجابَين (2)

هذا يعمل، شكراً جزيلاً!

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