添加预加载器后，Particle.js 停止工作

问题描述

particle.js 在未应用预加载器时完美运行。但是在我应用预加载器后，粒子不再可见。

preloader.js 具有：

function showPage(){
  // Hide the preloader
  document.querySelector(".preloader-wrap").style.display = "none";
  // Show the main contents
  document.querySelector("#mainPage").removeAttribute("hidden");;
}

style.css 有：

#particles-js{
  width: 100%;
  height: 100%;
  position:absolute;
  background: linear-gradient(45deg,#3d3d3d,#000000);
  z-index: -1;
}
.headwrap{
  margin: auto;
  height: 50vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
 }
.preloader-wrap{
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }

并且 index.html 包含：

<html>
<head><link rel="stylesheet" type ="text/css" href="style.css"></head>
<body onload="showPage()">
    <!-- Preloader -->
    <div class="preloader-wrap">
      <span class="loader">
        <span class="loader-inner"></span>
      </span>
    </div>
    <!-- Main Page -->
  <span id="mainPage" hidden>
     <div id="particles-js"></div>
      <div class="headwrap">
        <h1>Hello,World</h1>
      </div>
   </span>
<script src="preloader.js"></script>
<script src="particles.js"></script>
</body>
</html>

还有一个使用 CSS 制作的预加载动画（在 style.css 中），但这似乎不是问题。只要 #mainPage 中没有使用 hidden 属性，一切都会完美运行。

但是，当隐藏属性被应用和移除时，粒子停止显示。否则，它们可以完美运行。对正在发生的事情有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript particle.js