如何隐藏粒子效果(圆圈)，直到加载.png动画

Question

我目前正在使用从我在谷歌上找到的这个JS小提琴中获得的片段。它与我的项目非常有效，我已经在我的网站上直播了它。

然而。我的连接速度较慢 - 虽然我不确定这是否是发生这种情况的原因，但我看到"霓虹蓝色圆圈"漂浮在屏幕上显示"粒子"，然后加载到动画为烟雾效果的.PNG中。

我的问题：无论如何我可以隐藏这些圆圈吗？或者可能延迟效果直到加载.PNG？

我可能会让这听起来更复杂。我对JS不太好，但我可以涉足一点。任何帮助都非常感谢！

演示

#myCanvas{
    background:black;
    }

Answer 1

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

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

这基本上画了一个圆。

Answer 2

更新的演示：http://jsfiddle.net/Limitlessisa/Ujz4P/6158/

1. 步骤添加样式="不透明度：0"

<canvas id="myCanvas" style="opacity:0" width="400" height="400"></canvas>

2. Step Add js line $（'#myCanvas'）.animate（{opacity：1}）;

imageObj.onload = function() { particles.forEach(function(particle) { particle.setImage(imageObj); }); $('#myCanvas').animate({opacity:1}); };

替代烟雾效果：

JS小提琴示例