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

我正在使用我在google上找到的这个JS fiddle的代码片断。它对我的项目非常有效，我已经在我的网站上生效了。如何隐藏粒子效果（圈），直到它加载动画的.png为止？

但是，我有一个较慢的连接 - 尽管我不确定这是为什么发生这种情况，但我看到“霓虹蓝色圆圈”在显示“粒子”的屏幕上浮动，然后加载到作为烟雾效果动画的.PNG中。

我的问题：有反正我可以隐藏这些圈子吗？或者可能延迟效果，直到.PNG被加载？

我听起来可能会变得更加复杂。我对JS的感觉不是很好，但我可以尝试一下。任何帮助深表感谢！

#myCanvas{ 
    background:black; 
    }

来源

2016-03-11 Patrick

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

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

这本质上绘制一个单圈。

来源

2016-03-11 01:17:27 thedeliciousmuffin

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

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

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

步骤中添加的js线$（ '＃myCanvas'）动画（{不透明度：1}）。

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

替代烟雾效果：

JS FIDDLE Example

来源

2017-05-23 12:29:41

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

回答

相关问题