AngularJS页面加载闪烁解决方案
浏览数：112 /
时间：2015年06月09日
AngularJS这个大杀器使得实现SPA（Single Page App）变得异常的简单，其双向绑定让页面内容的重新渲染无需编写大量JS代码，无需构造DOM字符串丑陋的，作为需要快速迭代，提高用户体现的下一代互联网应用，AngularJS可以说已经成为必选技术之一。
然而，AngularJS同样存在Javascript的一个通病，其标签占位符需要在DOM加载完和javascript加载完后才会触发绑定和渲染工作，这导致在页面加载时会出现闪烁（先显示标签，再被渲染掉），尤其在网速不理想的情况下，严重影响用户体验。
AngularJS提供了两种方案来解决这个问题：
1、使用ng-bind或ng-bing-template属性而不是{{field}}占位符，由于DOM属性不可视，初始化时显示默认空白。
2、使用ng-cloak属性或设置ng-cloak样式。其原理是AngularJS在初始化时在head里增加了一个ng-cloak的样式，该样式设置DOM的display:none，即默认不显示。
然而这两个方案都不理想ng-bind或ng-bing-template无法实现复杂的内容表示，而现代浏览器仍然可能在ng-cloak样式被插入head之前显示页面了。
最终方案：样式表中增加一个ng-cloak，内容同AngularJS动态创建的一致，在head中静态加载
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
