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

Question

我目前正在使用我在 google 上找到的 JS fiddle 中的片段。它非常适合我的项目，我已经在我的网站上使用了它。

不过。我的连接速度较慢 - 虽然我不确定这是否就是发生这种情况的原因，但我看到 "Neon blue circles" 在屏幕上浮动，显示 "particle's" 在它加载到动画为烟雾效果。

我的问题：有没有办法隐藏这些圈子？或者可能会延迟效果直到加载 .PNG 文件？

我可能把它弄得比听起来更复杂了。我不太擅长 JS，但我可以涉猎一下。非常感谢任何帮助！

#myCanvas{
    background:black;
    }

Answer 1

您可以 remove/comment 输出这些行：

    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/

步骤添加style="opacity:0"

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

步骤添加js行$('#myCanvas').animate({opacity:1});

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

Alternative smoke effect:

JS FIDDLE Example

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

How to hide particle effect (Circles) until .png that it animates is loaded?

javascript

jquery

animation

canvas

particles