particles.js particles do not show up on chrome-CodePudding

So I was working with particles.js and it works on the safari browser (Im on a MacBook) but on chrome it throws the error and the particles do not show up.

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

Index.html

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

Styles.css

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

And I have the settings for the particles in a file called app.js.

CodePudding user response：

The error is because particle.js cant load two json-Files.

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

Check your console in Safari where it is working. There have to be errors as well and check the particle.js documentation to set it up the right way.

Thats the part of particle.js where the request failes:

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();