particles.js 粒子不显示在 chrome 上答案

【问题标题】：particles.js particles do not show up on chromeparticles.js 粒子不显示在 chrome 上
【发布时间】：2021-09-24 11:02:52
【问题描述】：

所以我使用particles.js，它可以在safari 浏览器上运行（我在MacBook 上），但在chrome 上它会抛出错误并且粒子不显示。

Error pJS - XMLHttpRequest status: 404
particles.js:1558 Error pJS - File config not found
particles.js:1557 Error pJS - XMLHttpRequest status: 404
particles.js:1558 Error pJS - File config not found

索引.html

<div id="particles-js"></div>
<script type = "text/javascript" src="particles.js"></script>
<script type = "text/javascript" src="app.js"></script>

样式.css

  #particles-js {
    position: absolute;
    z-index: -10;
    width: 100%;
    height: 100%;
    top: 0;
    background: #000000;
  }

我在一个名为 app.js 的文件中对粒子进行了设置。

【问题讨论】：

你能分享你的 app.js 吗？通常你加载你的particle.js，配置为.json-File。你的设置如何？
"File config not found" 是一个非常明确的错误消息，请调查为什么找不到它。乱猜，错误的文件路径。
@YalcinKilic app.js gist 和 Marc 文件在同一个目录中。
@ChaoticNebula 因此，当它在 safari 中而不是在 chrome 中工作时，可能是 app.js 在particle.js 之前加载的竞争条件。使用延迟属性。 app.js 需要particle.js 作为依赖
所以defer属性应该是<script type = "text/javascript" src="particles.js" defer></script>?

标签： javascript html css particles.js

【解决方案1】：

错误是因为particle.js 无法加载两个json-Files。

/particlesjs-config.json 和 /assets/particles.json

在 Safari 中检查您的控制台是否正常工作。也必须有错误，并检查particle.js 文档以正确设置它。

这就是particle.js中请求失败的部分：

window.particlesJS.load = function (tag_id, path_config_json, callback) {
    /* load json config */
    var xhr = new XMLHttpRequest();
    xhr.open("GET", path_config_json);
    xhr.onreadystatechange = function (data) {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          var params = JSON.parse(data.currentTarget.response);
          window.particlesJS(tag_id, params);
          if (callback) callback();
        } else {
          console.log("Error pJS - XMLHttpRequest status: " + xhr.status);
          console.log("Error pJS - File config not found");
        }
      }
    };
    xhr.send();

【讨论】：

那些错误在 safari 控制台中，我对代码做了一些更改，错误消失了，但粒子在 chrome 中仍然没有
我修好了，非常感谢！