ParticlesJS：“未定义的ReferenceError: particlesJS”

Question

我们让ParticlesJS工作@ https://digital.insightdesign.com.au/，在标题下面的第一部分覆盖完整的宽度/高度图像滑块。

然而，它停止了今天的工作，没有任何改变的网站。

控制台上写着：Uncaught ReferenceError: particlesJS is not defined

我们呼吁：

<script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" defer data-deferred="1"></script>

(在网站第44行)。

控制台中没有生成404的资源，也没有其他JS错误。

帮助感激。

Answer 1

您必须从以下位置删除defer：

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" defer data-deferred="1"></script>

或者将particlesJS代码添加到DOMContentLoaded事件中，如下所示：

window.addEventListener('DOMContentLoaded', (event) => {
  /* ---- particles.js config ---- */

  particlesJS("particles-js", {
    "particles": {
      "number": {
        "value": 380,
        "density": {
          "enable": true,
          "value_area": 3600
        }
      },
      ...
    }
    ...
  });
});

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

defer

此布尔属性设置为向浏览器指示脚本打算在解析文档之后执行，但在触发DOMContentLoaded之前执行。

带有延迟属性的脚本将防止DOMContentLoaded事件触发，直到脚本加载并完成计算。

如果src属性不存在(即对于内联脚本)，则不能使用此属性，在这种情况下，它不会产生任何效果。

带有延迟属性的脚本将按照它们在文档中的出现顺序执行。