HTML script

<div id="particles-js"></div>
<script src=".js/2.0.0/particles.min.js"></script>
<script>
    particlesJS.load('particles-js', 'particles.json',
    function(){
        console.log('particles.json loaded...')
    })
</script>

CSS for the particles

#particles-js {
    margin-top: 100px;
    width: 100vw;
    height: 400px;
    background: linear-gradient(45deg, #0ac8f8, #081866);
    z-index: 9;
}

Now whenever I load the page I get these errors (in the console):

particles.min.js:9 Failed to load file:///G:/actualtest/particles.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
window.particlesJS.load @ particles.min.js:9
(anonymous) @ home.html:66
particles.min.js:9 Error pJS - XMLHttpRequest status: 0
particles.min.js:9 Error pJS - File config not found

HTML script

<div id="particles-js"></div>
<script src="https://cdn.jsdelivr/particles.js/2.0.0/particles.min.js"></script>
<script>
    particlesJS.load('particles-js', 'particles.json',
    function(){
        console.log('particles.json loaded...')
    })
</script>

CSS for the particles

#particles-js {
    margin-top: 100px;
    width: 100vw;
    height: 400px;
    background: linear-gradient(45deg, #0ac8f8, #081866);
    z-index: 9;
}

Now whenever I load the page I get these errors (in the console):

particles.min.js:9 Failed to load file:///G:/actualtest/particles.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
window.particlesJS.load @ particles.min.js:9
(anonymous) @ home.html:66
particles.min.js:9 Error pJS - XMLHttpRequest status: 0
particles.min.js:9 Error pJS - File config not found

• javascript
• html
• css
• particles

Share Improve this question Follow edited May 14, 2018 at 21:19 Adam Kerik asked May 14, 2018 at 20:27 Adam KerikAdam Kerik 49166 silver badges1515 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

As @TemaniAfif pointed out, there is a missing ma here:

<script>
    particlesJS.load('particles-js', 'particles.json'
    function(){
        console.log('particles.json loaded...')'
    })
</body>

...because the inline function at the bottom is supposed to be a parameter of the particleJS.load function call. And it needs a closing script tag. Try replacing the above with:

<script>
    particlesJS.load('particles-js', 'particles.json',
    function(){
        console.log('particles.json loaded...')'
    })
</script>
</body>

please try following code:

<script>
particlesJS.load('particles-js', 'particles.json',
    function(){
        console.log("particles.json loaded...");
    });
</script>

Did you saved the "particle.json" file correctly in your root directory where your application runs?