Canvas在Angular Service调用上冻结第二个

时间:2016-04-20 20:08:18

标签: javascript angularjs css3 canvas createjs

我们有一个带有加载器动画的画布,我们在每个服务的每个响应中切换它的可见性。

当angular准备填充范围时,有时画布会冻结几秒钟停止动画​​并且范围正常。

Canvas是一个指令,我们每次更新它:

var exportRoot = new lib.htmlloader();

var stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();

假设1:加载器在结果ui-view="content"内,然后是bug。

假设2:Chrome无法正常响应然后崩溃几秒钟

假设3:指令上的更新画布有时会失败

我们知道为所有页面加载一个更好,但我们有不同的情况,例如加载模态,小网格而不是全局等。

1 个答案:

答案 0 :(得分:0)

使用css动画代替js / gif解决。灵感来自AngularJS:显示加载慢速脚本的动画,例如:过滤引用:“首先,你应该使用CSS动画。没有JS驱动的动画和GIF应该在繁重的过程中使用,因为单线程限制。动画将冻结.CSS动画与UI线程分离,并支持它们在IE 10+和所有主流浏览器上。编写一个指令并将其置于ng-view之外,并使用一些特殊标记将其绑定到你的app控制器。在长/重过程之前和之后切换该指令的可见性。(你甚至可以将文本消息绑定到指令以向用户显示一些有用的信息。 - 在繁重的流程循环中直接与此或其他任何内容交互将花费更长的时间来完成。这对用户来说很糟糕!“< / p>

但我不需要放弃ui观点。 PS:在https://connoratherton.com/loaders

中找到了不错的装载程序