ParticlesJS: "Uncaught ReferenceError: particlesJS is not defined"

Question

我们让 ParticlesJS 在 https://digital.insightdesign.com.au/ 工作，在 header 下面的第一部分覆盖了完整的 width/height 图像滑块。

但是，它今天停止工作，没有对站点进行任何更改。

控制台显示：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>

或像这样在 DOMContentLoaded 事件中添加 particlesJS 代码：

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

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.

This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect.

Scripts with the defer attribute will execute in the order in which they appear in the document.