Javascript 如何隐藏粒子效果（圆），直到加载了它的动画.png？

我目前正在使用从谷歌上找到的一个片段。它与我的项目配合得非常好，我的网站上已经有了它

不过。我有一个较慢的连接——虽然我不确定这是否是发生这种情况的原因，但我看到“霓虹蓝圈”在屏幕上浮动，显示“粒子的”，然后将其加载到以烟雾效果为动画的.PNG中

我的问题：我是否可以隐藏这些圆圈？或者可能延迟效果直到加载.PNG

我可能会让这听起来更复杂。我对JS不是很在行，但我可以涉猎一点。非常感谢您的帮助

#myCanvas{
    background:black;
    }

---

您可以删除/注释掉这些行：

    this.context.beginPath();
    this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
    this.context.fillStyle = "rgba(0, 255, 255, 1)";
    this.context.fill();
    this.context.closePath();

这基本上画了一个圆圈。

更新的演示：

步骤添加style=“不透明度：0”

步骤添加js行$（'#myCanvas'）。设置动画（{opacity:1}）

imageObj.onload=函数（）{
粒子。forEach（函数（粒子）{
particle.setImage（imageObj）；
});
$（'#myCanvas'）。设置动画（{opacity:1}）；
};

替代烟雾效应：